Question

I’m trying to use the jQuery on() method to attach the drop event to the browser window when doing file drag and drop…

$(window).on('drop', function(event) {

    var dt = event.dataTransfer;
    var fileList = dt.files;

    // do stuff with the file list...
});

… but I’m getting a TypeError:

This is happening whenever I try to attach drop to window or document or document.body. However, there is no problem if I attach the drop event using a custom JavaScript function…

function attachEvent(element, event, fn) {
    if (element.addEventListener) {
        element.addEventListener(event, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, fn);
    }
};

attachEvent(window, 'drop', function(event) {

    var dt = event.dataTransfer;
    var fileList = dt.files;

    // do stuff with the file list...
});

Any idea why this is happening? What am I doing wrong? Is there a way to attach the drop event to either window or document or document.body with jQuery?

Answer 1

The error message or the arguments array of the TypeError would make it easier to tell where the problem is occurring, but it’s likely that your problem’s not really happening on bind, but inside your callback.

jQuery uses a normalized event object. That object doesn’t have a dataTransfer property, so your var dt = event.dataTransfer line is making dt undefined. When you go to access the files property of the undefined dt in the next line, you get a TypeError.

You can access the native, non-normalized event object with all its “normal” properties from event.originalEvent, so when using jQuery, you’d want to do:

$(window).on('drop', function(event) {

    var dt = event.originalEvent.dataTransfer;
    var fileList = dt.files;

    // do stuff with the file list...
});