title: Uploading multiple images with React
body: <p>I would like to upload multiple images first by previewing them then submitting to send them off. I have encountered this: <code>TypeError: Cannot read property 'files' of null</code>. It also only lets me upload just one image.</p>
  
  <ul>
  <li>I have created <code>files: []</code> as means to mount the images for review before submitting.</li>
  <li>Tried creating an interface <code>files: File[] = file</code> then declaring it in state but get a different error that <code>file does not exist on type {}</code> </li>
  </ul>
  
  <pre><code>import * as React from "react"
  
  class ImageUpload extends React.Component {
    state: {
      files: []
    }
  
    fileSelectedHandler = (file: any) =&gt; {
      let addedFiles = this.state.files.concat(file)
      this.setState({ files: addedFiles })
      console.log("upload file " + file.name)
    }
  
    render() {
      return (
        &lt; form &gt;
          &lt;div&gt;
            &lt;h2&gt;Upload images&lt;/h2&gt;
          &lt;/div&gt;
          &lt;h3&gt;Images&lt;/h3&gt;
          &lt;input type="file" onChange={this.fileSelectedHandler} /&gt;
        &lt;/form&gt;
      )
    }
  }
  
  export default ImageUpload
  
  </code></pre>
  
  <p>I expect it to allow me to select multiple images and store them in the array before sending them off as a batch. Is this even the right way to do it? Any feedback is greatly appreciated.</p>