Image upload for multiple fields Angular 5 - angular5

Question

I have a scenario where i have to create multiple file upload fields dynamically using reactive forms with form array and upload multiple image for that particular field in angular 5 or angular reactive forms and the image needs to be displayed parallel to that form field name .
Please help with me with any sample code in stack blitz or from any links. Also
thanks.

Answer 1

You can do the file upload part using formData.
const formData: FormData = new FormData();
formData.append('file1', file1, file1.name);
formData.append('file2', file2, file2);
this.http.post(url, formData);
And using the change event in the
<input type="file" (chnage)="onChange($event)"> you can get the image source of the file you select.
Here
public fileList: FileList;
public imageUrls: any[];
public files: any[];
public onChange(event) {
if (event.target.files.length === 0) {
return;
}
this.fileList = event.target.files;
for (let i = 0; i < this.fileList.length; i++) {
const file = this.fileList[i];
if (!file.type.match('image')) {
continue;
}
this.files.push(file);
const picReader = new FileReader();
picReader.onload = (e: any) => {
const picFile = e.target;
this.imageUrls.push(picFile.result);
};
picReader.readAsDataURL(file);
}
}
And in the template
<input type="file"
(change)="onChange($event)"
placeholder="Upload file"
accept="image/*" multiple>
<p>(You may choose more than one file to upload.)</p>
<ng-container *ngFor="let item of imageUrls; let i = index">
<img [src]="item" height="100" class="img-thumbnail">
</ng-container>
This is just a idea. Just give it a try.