Discussion :

[Mike_STX]

Bonjour à tous,

Je suis actuellement en train de développer une application web avec Angular et json-server pour ma (petite) base de données, et je suis confronté à un problème qui me semble simple, mais j'ai l'impression que le concept m'échappe et je n'ai pas trouvé de doc claire sur le net, je requiers donc votre aide .

Je vous explique, j'ai un formulaire ou je demande, entre autre, à l'utilisateur d'uplaod un fichier .csv si besoin.

Code de mon formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form class="formAddNewresimRequest" name="FormTest" [formGroup]="addNewResimRequestForm" (ngSubmit)="handleSubmiAddNewResimRequest(addNewResimRequestForm.value.duplicate)">
 
... blablabla
 
<div class="divInputInRaw" style="width: 60%">
     <span class="spanText">Browse clips file : <i>(only .csv format accepted)</i> : </span>
     <input class="inputText" formControlName="listClipsToResimulate" type="file" accept=".csv" />
</div>
 
 <button type="submit" class="buttonSubmitForm" [disabled]="!addNewResimRequestForm.valid">          
                <div class="titleWithIcon">
                    <span class="spanButtonSubmit">Create resim request</span>
                    <span class="material-symbols-outlined" id="iconButtonSubmit">arrow_circle_right</span>
                </div>
 </button>
</form>

Du côté component, ma fonction reçoit bien toutes les infos nécessaires et à l'air de les envoyer correctement sur ma database (localhost:3000)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export class FormAddNewResimRequest {
 
  addNewResimRequestForm = new FormGroup ({
 
    //... blabla
    listClipsToResimulate: new FormControl(),
 
  });
 
  handleSubmiAddNewResimRequest(duplicate: any) {
    for (let i = 0; i < duplicate; i++ ) {
      this.resimRequestService.addNewResimRequest(this.addNewResimRequestForm.value);
    }
  }
}

Et côté de mon service, idem ça a l'air de se passer comme je le souhaite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
addNewResimRequest(newResimRequest: any) {
 
    this.http.post<ResimRequestInfo[]>(this.url, newResimRequest).subscribe(
      data => {
        console.log('Updated resim request:', data);
      }
    );
  }

Les problèmes arrivent maintenant, je souhaite pouvoir télécharger ce fichier dans une autre page, mais ça ne fonctionne pas, et ça me parait logique car dans ma DB, le champs apparait ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"listClipsToResimulate": "C:\\fakepath\\File.csv"

Est-ce l'attendu ? et je dois modifier le "fakepath" par autre chose ? Si j'essai de le télécharger via un lien <a></a>, chrome m'affiche l'erreur suivante : "Not allowed to load local resource: " mais je préfererai que mon fichier soit chargé côté serveur et non en local. Est-ce possible de le faire sur le localhost:3000 ? Si oui comment faire ? Sinon quelles sont les autres solutions ?

J'espère avoir été claire dans mes explications ^^.


Je vous remercie par avance pour votre aide !
Bonne journée à vous

[mathieu]

et à l'air de les envoyer correctement sur ma database (localhost:3000)

qu'est ce que vous voyez coté serveur ? qu'avez vous comme outils ou applications coté serveur pour gérer la base de données ?