File-drag.html example not working

[Guilouf]

https://mdn.github.io/dom-examples/drag-and-drop/File-drag.html

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]

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.

[Utopiah]

Confirming that it doesn't work. Also on Linux with both Firefox and Chromium (latest at the time of writing).

[pepelsbey]

It works for me consistently in Firefox, Safari, Chrome.

File(s) in drop zone
File(s) dropped
... file[0].name = another.png
... file[1].name = file.png
Removing drag data

The only inconsistency I noticed is the “Files in the drop zone” logging: Chrome and Safari keep firing the event when I’m holding files over, and Firefox seems to do it once. See the 225 number in Chrome DevTools.

I would say it needs deeper investigation and cross-browser testing.