Multiple File Upload with React JS

Question

I am trying to figure out how to loop through multiple file uploads in React JS.

Ultimately I want to be able to loop through each file so that I can tell if only PNG, JPG, and MP3 files are being uploaded. I also want PNG/JPG files to be restricted to 5MB and MP3 files to be restricted to 2MB.

So far, I cannot figure out why I can access one file rather than an array of files.

<input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple />

My handleChange function looks something like this:

handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;

     this.setState({
         [id]: value
     });

    console.log(id)
    console.log(value)
}

When I select more than one file, I only get one showing up. For example, the two console lines above produce the following:

file
C:\fakepath\My Secret Document.docx

Why is only a single value stored in value? How can I properly loop through each file to check its size and type? I am not interested in using JQuery.

What you want to check is event.target.files

Joshua Terrill
– Joshua Terrill

2017-05-23 00:06:16 +00:00
Commented May 23, 2017 at 0:06 — Joshua Terrill
– Joshua Terrill, Commented May 23, 2017 at 0:06

Nahuel Veron · Accepted Answer · 2019-06-10 05:22:10Z

20

The files are contained in a FileList, inside event.target.files, you can do Array.from(event.target.files) and got an array with all the files selected.

More information about FileList

edited Jun 10, 2019 at 5:22

answered May 23, 2017 at 3:33

Nahuel Veron

5326 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Multiple File Upload with React JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related