What is the Javascript event that triggers when you drag a file from your desktop to your browser

Question

I'm trying to implement a file upoload system similar to gmail's. I've already done all the Fileupload / AJAX issue and it works perfect. The only problem that I have is User Feedback.

For example.. in gmail, when you drag a file to your browser (assuming IE9+ user), there's an area that pops up, letting you drop the file in. I think it is some kind of JavaScript event that is captured by a framework (let's say Jquery), that allows me to make some cool animations on the drop area.

My question is simple.. What event should I capture to do this? Any ideas? Am I doing it wrong?

Answer 1

The main event is just drop.

You will also need to handle dragenter and dragleave otherwise the drop action will just cause a load of the dropped files. You may optionally also watch dragover.

I have some code that registers these handlers, like so:

var $dz = $('#dropzone');
$dz.on({
    dragenter: dragenter,
    dragleave: dragleave,
    dragover: false,
    drop: drop
});

function dragenter() {
    $dz.addClass('active');
};

function dragleave() {
    $dz.removeClass('active');
};

function drop(e) {
    var dt = e.originalEvent.dataTransfer;
    if (dt) {
        var files = dt.files;
        ...
    }
    $dz.removeClass('active');
};

In this case the dragenter and dragleave handlers are there just to change the appearance of the drop zone when stuff is being dragged into it.

Answer 2

It's called drop, and the properties you need from the event object will be in the originalEvent property.

$(element).on("drop",function(e){
  console.log(e.originalEvent)
});

you also need to unbind the dragenter and dragleave on that same element for it to fire the drop event, if I remember correctly.

$(element).on("dragenter dragleave", false);