title: Multiple File Upload with React JS
body: <p>I am trying to figure out how to loop through multiple file uploads in React JS. </p>
  
  <p>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.</p>
  
  <p>So far, I cannot figure out why I can access one file rather than an array of files.</p>
  
  <pre><code>&lt;input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple /&gt;
  </code></pre>
  
  <p>My handleChange function looks something like this:</p>
  
  <pre><code>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)
  }
  </code></pre>
  
  <p>When I select more than one file, I only get one showing up. For example, the two console lines above produce the following:</p>
  
  <pre><code>file
  C:\fakepath\My Secret Document.docx
  </code></pre>
  
  <p>Why is only a single value stored in <code>value</code>? How can I properly loop through each file to check its size and type? I am not interested in using JQuery.</p>