File drop not working on the ReactDND website using Chrome

[adityasan92]

Hi,

I am trying to get the file drop feature work. It seems to not be working on the http://gaearon.github.io/react-dnd/examples-dustbin-multiple-targets.html

I get the error:** Uncaught Invariant Violation: Cannot call hover while not dragging. **I am using Chrome. I am new to react and redux. Please help me thanks.

[gaearon]

I can’t reproduce this on OS X with Chrome 48. Please post your operating system (Windows, assuming from scroll bars), Chrome version, and exact sequence of steps to reproduce the problem.

[adityasan92]

Hey gaearon,

I am using windows 10, and the Chrome Version is 48.0.2564.109 m. I was trying to use the file drop feature on the website, so I tried dropping a txt file into the Dustbin that accepts the Native_file on the website. that gave me the above error. When I use firefox it seems to be dropping but gives a warning as show below

Thanks for the reply. Big fan of ReactDND and Redux.

[gaearon]

This should be fixed in react-dnd-html5-backend@2.1.2.
Please verify.

(I have not had time to update the website yet but I will later today.)

[adityasan92]

Thanks the new version works!!

[gaearon]

I’m glad! (I had to buy a BrowserStack license to debug it 😅 )

[mrcrlee]

Dan,

Thanks for your attention to this issue.

I've discovered, while using in development and through the dustbin examples hosted on github, this issue does persist on the following platform:

Windows 7 Enterprise
Firefox: 38.5.0

Screenshot attached.

[stevengoldberg]

Hey @gaearon, I've been seeing this pop up in my error logs as well -- looks like it's happening to users on Windows 7 and Windows 10, and all on Firefox 47, when they're trying to do something with file drag-and-drop. I've got "react-dnd": "^2.1.4" and "react-dnd-html5-backend": "^2.1.2".

[razjel]

I also can't figure out how to solve this problem, but I discovered that It's most probably because of this fix in HTML5Backend.js

    // On Firefox, if mousemove fires, the drag is over but browser failed to tell us.
    // This is not true for other browsers.
    if (isFirefox()) {
      window.addEventListener('mousemove', this.endDragNativeItem, true);
    }