file drag and drop in Firefox 3.6

In a previous post, we showed you how to upload several files using the input element. In Firefox 3.6, you can let your users drag and drop files directly into your web page, without going through the file picker.

Demo

Drag and Drop Events

To use drag and drop, you first need to tell the browser that a given element can handle dropped objects and will respond to a drop action, using the dragover and drop events.

You also need to prevent the browser’s default behavior, which is to simply load the dropped object in the browser window.

dropzone.addEventListener("dragover",function(event){
event.preventDefault();},true);
dropzone.addEventListener("drop",function(event){
event.preventDefault();// Ready to do something with the dropped object},true);

thank you thank you thank you Mozilla! keep implementing these KILLER features and we will eventually kill IE (or force them to keep up with competition). Can’t wait to try out drag n drop upload on a new site!

hi, i’m a web developper on php and when i imagine using this feature, i imagine my users be able to drag and drop images on a simple web page to upload it on a server and create an image gallery !
Do you know some code doing these at the moment ?

Hm. How can I create new DataTransfer object? I would like to drag&drop feature into my WYSIWYG. I can capture drop & upload the image but I would like to reset the event.dataTransfer object and fill it with HTML IMG tag pointing to the uploaded image or re-dispatch new “drop” event with HTML IMG text/html data in it… Is there anything like this possible with FF3.6?

This is a great demo. The doco on MDC is not good enough. hacks.mozilla.org is heaven sent.

However ! Could you follow up with an upload demo? The open web needs a drag, drop, begin upload, show progress, preview image in place capability. Flash can do this AFAIK, it’s time the open web had such functionality.

Also, can this demo be re-created and adjusted to include multiple drag and drop?

My apologies, it’s working again; I did nothing except restart my computer. Yesterday after installing RC1, behavior was as I described. Today I restarted after installing IE9 (I know, needed for work…), and drag and drop upload works as before. Weird.