Récupérer un fichier chargé dans un Form
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:
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:
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:
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:
"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
