Search code examples
javascriptfirefoxdrag-and-dropdom-eventsdragenter

Firefox bug, drag events give dataTransfer.files = null, defined in all other browsers


Here is a jsfiddle of the exact problem.

For me the 'dragenter' event dataTransfer.files is defined correctly in everything but Firefox. However, the 'drop' event always has the correct dataTransfer.files, even in Firefox.

Not sure if this is a possible bug in Firefox (21.0 and now 23.0.1), it's happening on both Mac OS and Windows.

and the full code:

function preventDefault(_e) {
    _e.preventDefault();
}

var dropZone = document.getElementById('drop-zone');
dropZone.addEventListener("dragstart", preventDefault, false);
dropZone.addEventListener("dragleave", preventDefault, false);
dropZone.addEventListener("drag", preventDefault, false);
dropZone.addEventListener("dragend", preventDefault, false);
dropZone.addEventListener("dragover", preventDefault, false);
dropZone.addEventListener("dragenter", function(_e) {
    _e.preventDefault();
    console.log(_e.dataTransfer.files);
}, false);
dropZone.addEventListener("drop", function(_e) {
    _e.preventDefault();
    console.log(_e.dataTransfer.files);
}, false);

Do other people have the same results?

It could be a sandbox restriction, but I haven't found anything about it...

Any and all ideas and answers are appreciated :).


Solution

  • According to the spec (whatwg), the data is in "Protected mode", meaning not available. I'd guess this is to prevent sites from snooping/stealing stuff from drags not intended for them.

    So, my interpretation is that Firefox is actually right not to allow access to .files in dragenter, and the bug is with the other browsers.

    PS: Firefox source, explicitly returning nothing on dragenter.