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;

}

Reference URL

Comments

  1. User Avatar
    dgriesel
    Permalink to comment#

    How about this?

    if ( t = event.dataTransfer.types )
        return t.contains("Files")
    
    • User Avatar
      tbruun
      Permalink to comment#

      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.

  2. User Avatar
    Jeff Ayer
    Permalink to comment#

    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;
    }
    
  3. User Avatar
    Vclav

    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.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag