Test if dragenter/dragover Event Contains Files

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;

}

Comments

dgriesel

# August 13, 2013

How about this?

if ( t = event.dataTransfer.types )
    return t.contains("Files")

tbruun

Permalink to comment# January 14, 2014

Beware that types in Firefox is a DOMStringList, while in Chrome it’s an Array. You can use types.indexOf("Files") !== -1, but that won’t work with the DOMStringList. At this point you might as well go with the author’s solution.

Jeff Ayer

# April 7, 2014

A different ie9+ take:

containsFiles = function(e) {
    var dataType = Array.prototype.slice.call(e.dataTransfer.types);

    dataType = dataType.filter(function(e) {
        return e == "Files";
    });

    return dataType.length;
}

Vclav

# June 3, 2016

Simpler and more efficient version:

isEventWithFiles(event) {
    var temp = (event.originalEvent || event).dataTransfer;
    return temp && (temp = temp.types) && temp[0] === 'Files';
}

PS: works with any event, even with jQuery Event object.

Marek

Permalink to comment# December 4, 2018
Better is
```
return temp && (temp = temp.types) && (temp.indexOf('Files') != -1);
```
because Firefox has type Array [ "application/x-moz-file", "Files" ]

Comments

Leave a Reply Cancel reply