Angular 7 How to upload files from multiple inputs

Question

I using Angular 7 with typescript and my question is: How to upload files from multiple inputs in html like this:

<input type="file" (change)="handleFileInput($event.target.files)">
<input type="file" (change)="handleFileInput($event.target.files)">
<input type="file" (change)="handleFileInput($event.target.files)">

I know about multiple but I can't use it because I need to change the name of each file to value of enum in spring boot app

Well, you don't make multiple file inputs. You have one input element with multiple attribute to enable the user to upload multiple files. Then you use FormData to append selected files and make a request to the server using HttpClient. — mighty_dev
– mighty_dev, Commented Jul 22, 2019 at 7:56
@Mateusz Sobczak Is there a reason for not using a single input? — Luis Rico
– Luis Rico, Commented Jul 22, 2019 at 8:20
@LuisRico because I need to change the name of each file to value of enum in spring boot app — Mateusz Sobczak
– Mateusz Sobczak, Commented Jul 22, 2019 at 8:51
Please have a look I hope it's helpful stackoverflow.com/questions/51587241/… — Sanat Gupta
– Sanat Gupta, Commented Jul 22, 2019 at 9:24
posible duplicate of How to Upload multiple files in Angular 6 with ADDMORE button? — Luis Rico
– Luis Rico, Commented Jul 22, 2019 at 9:28

Dmitry Vasilkov · Accepted Answer · 2019-07-22 08:18:09Z

0

create one input fields and set multiple params for it.

<input type="file" multiple>

answered Jul 22, 2019 at 8:18

Dmitry Vasilkov

762 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ismail · Accepted Answer · 2019-07-22 09:13:13Z

0

You don't have to create multiple file input fields. One is enough and You can select multiple files in it to upload.

<input type="file" name="img" multiple>

The multiple attribute is a boolean attribute. When present, it specifies that the user is allowed to enter more than one value in the element. To select multiple files, hold down the CTRL or SHIFT key while selecting.

edited Jul 22, 2019 at 9:13

answered Jul 22, 2019 at 8:00

Ismail

1,3661 gold badge18 silver badges32 bronze badges

Comments

Luis Rico · Accepted Answer · 2019-07-22 09:25:36Z

0

Using a single input you can still rename each file independently:

  onFileChange(files: FileList) {
     Array.from(files).forEach(file => {
       //ADD CODE TO RENAME THE FILE
      });
 }

edited Jul 22, 2019 at 9:25

answered Jul 22, 2019 at 9:09

Luis Rico

6356 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular 7 How to upload files from multiple inputs

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related