React.js：HTML输入传递文件数组onChange

Question

I have a function that accepts an array of Files.

I want to reuse this function, without having to change it, for accepting files from an HTML5 input.

Here is my input:

 render() {
   return (
    <div>
      <form>
        <input className="fileInput" 
          type="file" 
          onChange={this.onUpload.bind(this)} />
     </form>
   </div> 
 )}

Here is the function that I want to call:

 onUpload(arrayOfFiles) {
   // do something with files
 }

The problem is, that when I call onUpload from my input, it does not pass in an array of Files. In order to access the files, I would have to do something like this in my onUpload function:

 files = arrayOfFiles.target.files;

How can I pass the array of Files itself to my onUpload function?

This won't work:

<form>
  <input className="fileInput" 
   type="file" 
   onChange={this.onUpload.bind(this.target.files)} />
</form>

I get the error "Cannot read property 'files' of undefined"

Answer 1

Changing the input to the following does the trick:

<input className="fileInput" 
   type="file" 
  onChange={(e) => this.onUpload(e.target.files)} />