search

mdn / dom-examples

Code examples that accompany various MDN DOM and Web API documentation pages
https://developer.mozilla.org/en-US/docs/Web/API
Creative Commons Zero v1.0 Universal
3.44k stars 1.8k forks source link

File-drag.html example not working #45

Open Guilouf opened 5 years ago

Guilouf commented 5 years ago

In fact it is not working every time. Sometimes the file are detected, and their name is printed, sometimes not. The drop event is always fired.

Here is an output, showing that it only worked once: 

File(s) in drop zone
File-drag.html:32:7
File(s) dropped File-drag.html:39:7
Removing drag data File-drag.html:65:7
File(s) in drop zone
File-drag.html:32:7
File(s) dropped File-drag.html:39:7
Removing drag data File-drag.html:65:7
File(s) in drop zone
File-drag.html:32:7
File(s) dropped File-drag.html:39:7
Removing drag data File-drag.html:65:7
File(s) in drop zone
File-drag.html:32:7
File(s) dropped File-drag.html:39:7
... file[0].name = screen_fluoread.png File-drag.html:50:13
Removing drag data

Files from os to browser using firefox. Using chrome there is no issues

luisbc92 commented 5 years ago

I tested this example in Firefox on both Windows and Linux and found that the behavior is different.

In Linux (tested Firefox 60.6.1esr and 66.0.3, both 64-bit), I noticed that when you drag one or more files over, the dragover event takes some time to fire (scaling with the size of the files). If you drop before this event happens, the drop event does not occur.

In Windows (Firefox 66.0.3 64-bit), the dragover event happens instantly and the example works as expected. I wasn't able to test the case where I drop the files before the dragover event fires.