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.