HTML5 drag and drop is great for handling file uploads. But if that’s the only thing you are using it for, it’s nice to know if any particular dragenter
or dragover
event actually has files. Unlike, for example, just the dragging of some selected text.
Send the event object to this function and it will return the truth (assuming you are in a browser that supports all this):
function containsFiles(event) {
if (event.dataTransfer.types) {
for (var i = 0; i < event.dataTransfer.types.length; i++) {
if (event.dataTransfer.types[i] == "Files") {
return true;
}
}
}
return false;
}
How about this?
Beware that
types
in Firefox is aDOMStringList
, while in Chrome it’s anArray
. You can usetypes.indexOf("Files") !== -1
, but that won’t work with theDOMStringList
. At this point you might as well go with the author’s solution.A different ie9+ take:
Simpler and more efficient version:
PS: works with any event, even with jQuery Event object.
Better is
because Firefox has type
Array [ "application/x-moz-file", "Files" ]