React dropzone - dragLeave event fired when dragging file over dropzone

Question

I am using React dropzone for file upload

<DropZone
            accept='.pdf,.pptx,.ppt,.docx,.doc,.xls,.xlsx,.xslx,.png,.xsl,.jpg,.jpeg,.gif,.zip'
            onDrop={ files => {
              this.handleFileDrop(files);
              this.dragLeaveHandler();
            } }
            onDragEnter={ this.dragOverHandler }
            onDragLeave={ this.dragLeaveHandler }
            multiple={ false }
            style={ { height: '100%' } }
          >

  dragOverHandler = () => {
    console.log('enter');
    this.setState({
      isDragOver: true,
    });
  };

  dragLeaveHandler = () => {
    console.log('exit');
    this.setState({
      isDragOver: false,
    });
  };

When a file is moving above the drop zone onDragLeave event fires simultaneously.

Should I use some other events? How can I fix this issue?

It would be helpful to see what you're rendering as the children of your `DropZone`. Some elements, like `
` tags, can mess with the dom events. — Jemi Salo, Jan 08 '19 at 18:51
For future people, I found adding a `dragCounter` is simple and works well~ https://stackoverflow.com/a/35760401/3630407 — Regis, Aug 30 '22 at 21:55

score 3 · Answer 1 · answered Jul 17 '20 at 08:54

3

You could use pointer-events: none; on the element(s) that are firing the drag leave. That should still allow the dropped event and getting the accepted file though would stop overriding the dropzone events.

answered Jul 17 '20 at 08:54

Shay

2,060
2
16
22

I had the opposite situation of the original post -- namely, the `dragLeave` was not being fired when it should have been -- but this appears to have solved that as well! – knueser Oct 10 '22 at 12:25

score 2 · Accepted Answer · answered Jan 09 '19 at 17:00

The problem you're facing is most likely caused by the DOM events dragEnter and dragLeave getting messed up instead of any flaw in the react-dropzone package. Some elements may cause hovering over them in certain positions not to register as hovering over their parent element. For example, there is a thin sliver at the top edge of any plain string rendered inside a block displayed element. Most commonly this happens inside a <p> tag.

Without seeing the children rendered inside your dropzone, it is impossible to give a specific fix. Generally, you will have to mess with the styling of the children, though. <p> tags for example will not be a problem if their size is set to 0 pixels or if they're replaced with <span> tags. Both options will disrupt the displaying of the children, which is unfortunatley unavoidable.

As for using other events, you're out of luck. The DropZone component relies on the onDragEnter and onDragLeave HTML DOM events. Therefore any fix you might come up with won't fix the component itself.

All in all, it's an unfortunate issue that just has to be dealt with. The simplest way to deal with it is to just have at most one piece of text inside the dropzone and to set its size to 0 pixels with css: height: 0px;. Regular <div> elements won't cause issues, so you can craft an intricate dropzone using them.

score 0 · Answer 3 · answered Jun 05 '23 at 17:56

One way I managed to solve this, is by counting the number of enter/leave events. When you enter the outermost element you receive the first dragEnter. Then if you move further in, you get a dragEnter for an inner element and a dragLeave for the outer one. So far you got 2 enters and one leave, so you're still in. Make sure to reset in the drop handler.

const DropZone = () => {
  const [hang, setHang] = useState(false);
  const hangCount = useRef(0);
  const updateHang = (amt) => {
    if (amt) { hangCount.current += amt; }
    else { hangCount.current = 0; }
    setHang(hangCount.current > 0);
  }
  const drop = (ev) => {
    ev.preventDefault();
    updateHang(0); // reset
    /* rest of drop logic */
  }
  return <div
    onDrop={drop}
    onDragEnter={() => updateHang(1)}
    onDragLeave={() => updateHang(-1)}
    className={hang ? 'hang' : ''}
  ></div>;
}

React dropzone - dragLeave event fired when dragging file over dropzone

3 Answers3