title: Get image preview before uploading in React
body: <p>Many examples of this on here but can't seem to find any for react. I have managed to convert the vanilla js to react but getting <a href="https://stackoverflow.com/questions/32508191/uncaught-typeerror-failed-to-execute-readasdataurl-on-filereader-parameter">an error</a>.</p>
  
  <p>The answer looks simple enough so here I go in react:</p>
  
  <pre><code>getInitialState: function(){
    return{file: []}
  },
  
  _onChange: function(){
    // Assuming only image
    var file = this.refs.file.files[0];
    var reader = new FileReader();
    var url = reader.readAsDataURL(file);
    console.log(url) // Would see a path?
    // TODO: concat files for setState
  },
  
  render: function(){
   return(
    &lt;div&gt;
      &lt;form&gt;
        &lt;input 
          ref="file" 
          type="file" 
          name="user[image]" 
          multiple="true"
          onChange={this._onChange}/&gt;
       &lt;/form&gt;
      {/* Only show first image, for now. */}
      &lt;img src={this.state.file[0} /&gt;
    &lt;/div&gt;
   )
  };
  </code></pre>
  
  <p>Basically all answers I have seen show something like what I have. Any difference in React app?</p>
  
  <p>Regarding answer:</p>
  
  <p><a href="https://i.stack.imgur.com/o08oe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/o08oe.png" alt="enter image description here"></a></p>