title: onDrop event not working properly React?
body: <p>I have this <code>dropZone</code> that is clickable and opens up the file selecting thing. And once a file is selected from your computer it gives a preview of it (if it's an image). I would like to be able to drag and drop the same file and it do the same thing as if I were to click in the div and open up a file.    </p>
  
  <p>I tried calling my <code>handleChange</code> function inside of the <code>onDrop</code> but it didn't quite work and I would get an <code>TypeError: Cannot read property 'target' of undefined</code> error or it just wouldn't do anything at all. <a href="https://codesandbox.io/s/232k3xq2kj" rel="nofollow noreferrer">Here is a CodeSandbox of the dropzone component on it's own.</a></p>
  
  <p>Here's that snippet of my code: </p>
  
  <pre><code>class DropZone extends Component {
  
    constructor(props){
      super(props)
      this.state = {
        file: "",
        fileId: uuid(),
        className: 'dropZone'
      }
      this.handleChange = this.handleChange.bind(this)
      this._onDragEnter = this._onDragEnter.bind(this);
      this._onDragLeave = this._onDragLeave.bind(this);
      this._onDragOver = this._onDragOver.bind(this);
      this._onDrop = this._onDrop.bind(this);
    }
  
    handleChange(event) {
      this.setState({
        file: URL.createObjectURL(event.target.files[0])
      })
      console.log("handleChange")
      //document.getElementsByClassName("dropZone").style.backgroundImage = 'url(' + this.state.file + ')';
    }
  
    componentDidMount() {
      window.addEventListener('mouseup', this._onDragLeave);
      window.addEventListener('dragenter', this._onDragEnter);
      window.addEventListener('dragover', this._onDragOver);
      document.getElementById('dragbox').addEventListener('dragleave', this._onDragLeave);
      window.addEventListener('drop', this._onDrop);
    }
  
    componentWillUnmount() {
      window.removeEventListener('mouseup', this._onDragLeave);
      window.removeEventListener('dragenter', this._onDragEnter);
      window.addEventListener('dragover', this._onDragOver);
      document.getElementById('dragbox').removeEventListener('dragleave', this._onDragLeave);
      window.removeEventListener('drop', this._onDrop);
    }
  
    _onDragEnter(e) {
      e.stopPropagation();
      e.preventDefault();
      return false;
    }
  
    _onDragOver(e) {
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  
    _onDragLeave(e) {
      e.stopPropagation();
      e.preventDefault();
      return false;
    }
  
    _onDrop(e, event) {
      e.preventDefault();
      this.handleChange
      let files = e.dataTransfer.files;
      console.log('Files dropped: ', files);
      // Upload files
      //this.handleChange.bind(this)
      console.log(this.state.file)
      return false;
    }
  
  render() {
    const uniqueId = this.state.fileId;
    return (
      &lt;div&gt;
        &lt;input type="file" id={uniqueId} name={uniqueId} class="inputFile" onChange={this.handleChange}/&gt;
        &lt;label   htmlFor={uniqueId} value={this.state.file}&gt;
        {this.props.children}
          &lt;div className="dropZone" id="dragbox" onChange={this.handleChange}&gt;
            Drop or Choose File
            &lt;img src={this.state.file} id="pic" name="file" accept="image/*"/&gt;
          &lt;/div&gt;
        &lt;/label&gt;
        &lt;div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  }
  </code></pre>
  
  <p>There's going to be multiple of these that upload their own individual photo/file. Thanks!</p>