How to Attach Drag & Drop Event Listeners to a React component

Question

I'm building a component that allows local files to be dragged and dropped on a div. Then there's an output of information about the dropped file.

My problem is I don't know how to properly attach the event listeners drop and dragover when creating my component.

My App component is where all where all my logic is (handler for drop and dragover) and I created a separate component where files will be dropped on - dropZone component.

I tried putting the event listener on the dropZone tag on my App component with a componentDidMount where if my dropZone component had been rendered put an event listener on it:

componentDidMount(){
      const dropZone = document.getElementById('dropZone');
      dropZone.addEventListener('dragover', this.allowDrop.bind(this))
      dropZone.addEventListener('drop', this.dropHandler.bind(this))
    } 

this didn't work

I then tried putting it in my dropZone tag that lives on my app component:

<DropZone dropZone = {"dropZone"} onDragOver = {this.allowDrop.bind(this)} 
 onDrop ={this.dropHandler.bind(this)} >      
</DropZone>

this didn't add an event listener to dropZone either. I've tried a couple of other things but these are the ones that I though should've worked.

So my questions are,

• how do I add the drop and dragover event listeners to dropZone?

• Should I be adding these event listeners on App and passing them to dropZone component as a prop? Or is no passing down even necessary

• Or should I be adding the event listeners on dropZone directly and so my event handler functions live in the dropZone component?

Solution

You don't need to use props. You can just add all the events inside your DropZone component.

http://codepen.io/jzmmm/pen/bZjzxN?editors=0011

This is where i add the events:

  componentDidMount() {
    window.addEventListener('mouseup', this._onDragLeave);
    window.addEventListener('dragenter', this._onDragEnter);
    window.addEventListener('dragover', this._onDragOver);
    window.addEventListener('drop', this._onDrop);
    document.getElementById('dragbox').addEventListener('dragleave', this._onDragLeave);
  }

Your render method:

  render() {
    return (
      <div>
        {this.props.children}
        <div id="dragbox" className={this.state.className}>
          Drop a file to Upload
        </div>
      </div>
    );
  }

As you can see in componentDidMount, i added an eventlistener to #dragbox as well. Because once you drag a file over the page, #dragbox is under the mouse cursor, so it needs a dragleave in case you decide you don't want to drop the file there.

Also, dragover is needed to capture the drop

Then in my App component, i can use it like this:

class App extends React.Component {
  render() {
    return (
      <DropZone>
        <div>
          <h1>Drag A File Here...</h1>
        </div>
      </DropZone>
    );
  }
}