I attempted to upload multiple images using "angular 13", but I'm unable to retrieve the uploaded file in the payload. The formData appears empty in the console.
Any suggestions on how to resolve this issue?
Here is the HTML code:
<form [formGroup]="myForm" (ngSubmit)="submit()">
<div class="form-group">
<label for="file">File</label>
<input id="file" type="file" multiple class="form-control" (change)="onFileChange($event)">
<div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
<div *ngIf="f.file.errors && f.file.errors.required">File is required.</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
gallery.ts
onFileChange(event: any) {
if (event.target.files.length > 0) {
for (var i = 0; i < (event.target.files.length); i++) {
this.myFiles.push(event.target.files[i]);
this.myForm.get('file')?.setValue(this.myFiles);
console.log('my files check', this.myFiles);
}
}
}
submit() {
let id = localStorage.getItem('uid');
const formData = new FormData();
for (var i = 0; i < this.myFiles.length; i++) {
formData.append("file[]", this.myFiles[i]);
}
let payload = {
'url': '/api/uploadgallery',
'formData': formData,
'id': id,
}
console.log('form data check', payload);
this.playerService.postFilegallery(payload).subscribe((response: any) => {
console.log('resonsecheck', response);
});
Service.ts
postFilegallery(sendData: any) {
console.log('send data check',sendData);
let headers = {
'Accept': 'multipart/form-data'
};
return this.http.post(API_URL + sendData.url, sendData, { headers: headers })
.pipe(map(res => {
res
alert('Uploaded Successfully.');
}));
}