CODEWITHSUNDEEP
angulartypescript
Sai Manoj
Sai Manoj

Reputation: 3859

Iterate file upload with description using FormArray in Angular

I'm trying to create a form which will have n fields including file upload. I'm trying to iterate file upload on click of a button. So by default there will be one file. So when user clicks on add button, one more set of file upload should be added.So my output should be something like array of n file objects.

Expected output for file upload:

[
 {
  file: image1,
  fileDescription: file1
 },
 {
  file: image2,
  fileDescription: my second image
 }
]

Deleted file is not available for upload again for that I have used @ViewChild to reset the value = '', then you can select the deleted file again. This was added from one of the answers by Prashant

Note: All the above should have validation. Here is the working stackblitz so far I have tried.

Upvotes: 4

Views: 820

Answers (1)

Sebastian Puchet
Sebastian Puchet

Reputation: 398

You have to use a FormArray, and push a new value each time the user click on the "add file upload button".

You can find a working example here: https://stackblitz.com/edit/angular-pg1szu

Upvotes: 1

Related Questions