Mozilla

file drag and drop in Firefox 3.6

on December 14, 2009 by

in Demo Drag and Drop FileAPI Firefox

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

If you’re running the latest Firefox 3.6 beta, check out our interactive demo of drag and drop. It showcases two technologies: the Drag and Drop API and the File API.

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);

You may also want to use the dragenter and dragleave events to be notified when a drag session starts or stops.

Your element is now ready to receive files with the drop event.

Manipulating the Files

On the drop event, you can access the files with the files property of the DataTransfer object:

dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Ready to do something with the dropped object
  var allTheFiles = event.dataTransfer.files;
  alert("You've just dropped " + allTheFiles.length + " files");
}, true);

Once you’ve accessed the files, the File API lets you do much more, like parsing files as a binary array, or displaying a preview of an image by reading the file as a DataURL.

Of course, you can still drag and drop data other than files (e.g. text, URLs, remote images …) using the drag and drop API.

Posted by on at

32 comments

Comments are now closed.

  1. Gilberto Ramos wrote on December 14th, 2009 at 12:47 pm:

    A MA ZING!!!

  2. Jose wrote on December 14th, 2009 at 2:12 pm:

    would it be possible to drag and drop the other way around. E.g. a list of files, like in an ftp listing, selecting them (with a checkbox, maybe) and dragging them on to the finder/window explorer?

  3. Yehuda B. wrote on December 14th, 2009 at 2:22 pm:

    Here is another file-upload-via-drag-n-drop demo that I created:

    View the screencast (no sound): http://vimeo.com/6055152

    Try for yourself with Firefox 3.6: http://yehudab.com/apps/drag-n-drop/demo.html

  4. Fritz wrote on December 14th, 2009 at 3:12 pm:

    I can’t wait to see what these will be used for. I have quite a few possibilities floating around in my head but I’m sure someone will come up with a use beyond my wildest imagination.

  5. K wrote on December 15th, 2009 at 1:25 am:

    preventDefault on dragover isn’t really necessary is it? It works fine here without it.

  6. paul wrote on December 15th, 2009 at 4:13 am:

    @K Yes, it is, at least, under Linux + Gnome.

  7. Aditya wrote on December 15th, 2009 at 11:02 am:

    It’s awesome. But on its flip side, i understand there is an awful API which we are going to deal with for making it work as expected.
    Lets hope Firefox would come out with its best.

  8. Pingback from interactive file uploads with Drag and Drop, FileAPI and XMLHttpRequest ✩ hacks.mozilla.org on December 28th, 2009 at 5:51 pm:

    [...] previous posts, we showed how to access a file through the input tag or through the Drag and Drop mechanism. In both cases, you can use XMLHttpRequest to upload the files and follow the upload [...]

  9. Pingback from Extract all urls from the last firefox sessionstore.js file used. - Amit Agarwal on January 5th, 2010 at 8:42 am:

    [...] file drag and drop in Firefox 3.6 (hacks.mozilla.org) [...]

  10. Pingback from Potegni in spusti v Firefox 3.6 » Kratkočasnik on January 13th, 2010 at 4:22 am:

    [...] Zanimiv feature, ki prihaja v naslednjem Firefoxu. [...]

  11. Aurélio wrote on January 20th, 2010 at 7:12 am:

    Gostaria de saber o seguinte; instalei o firefox3.6 por cima do firefox3.5 pode ocorrer algum tipo de erro ou conflito? e já está disponível complementos para o firefox3.6 ? Help….. (há, gostaria de ressaltar que não entendo nada de inglês)

  12. Pingback from Webbased 3D viewer | No Pity for the Masses on January 24th, 2010 at 7:57 pm:

    [...] drag the proper file over to the browsing area.  The file drag and drop was supposed to look like this tutorial but my server doesn’t support the SVG mime-type so all you’ll see is the works [...]

  13. Pingback from firefox 3.6 « kravca.mu/blog on January 26th, 2010 at 4:30 am:

    [...] drag and drop http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/ [...]

  14. Michael Butler wrote on February 4th, 2010 at 4:16 pm:

    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!

  15. bond wrote on February 20th, 2010 at 7:46 am:

    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 ?

    thanks !!

  16. Pingback from Firefox: 46 features you might not know about ✩ Mozilla Hacks – the Web developer blog on February 24th, 2010 at 6:19 am:

    [...] Drag and Drop files from the Desktop [...]

  17. Pingback from 谋智社区 » Blog Archives » Firefox：您可能还不知道的46项功能 on March 5th, 2010 at 2:14 am:

    [...] 从桌面拖放文件 3.6 [...]

  18. qwazix wrote on April 15th, 2010 at 7:06 am:

    I have used this and other fine examples on the subject to create an open source project which aims to be a complete solution for drag and drop uploading. Visit http://dragdropupload.sourceforge.net

  19. another_sam wrote on April 16th, 2010 at 1:33 pm:

    Ask for this on Google Docs
    http://docs.google.com/support/bin/request.py?contact_type=featuresuggest

  20. Elixon wrote on April 30th, 2010 at 3:29 pm:

    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?

  21. Edmond wrote on June 15th, 2010 at 5:50 am:

    Is it possible to capture the dropped file and assign it to a file input so it can be uploaded later when a form is submitted?

  22. Pingback from an HTML5 offline image editor and uploader application ✩ Mozilla 웹 기술 블로그 on July 7th, 2010 at 9:04 am:

    [...] HTML5 Drag and Drop: 웹 페이지의 항목들을 끌어다 떨구거나 바탕화면에 있는 이미지들을 바로 브라우저위에 가져다 떨굴 수 있다. [...]

  23. Pingback from file drag and drop in Firefox 3.6 ✩ Mozilla 웹 기술 블로그 on July 7th, 2010 at 9:21 am:

    [...] file drag and drop in Firefox 3.6, 2009년 12월 14일, Paul [...]

  24. Komrade Killjoy wrote on July 28th, 2010 at 5:46 am:

    *cough*

    https://addons.mozilla.org/en-US/firefox/addon/2190/

  25. pd wrote on August 9th, 2010 at 11:13 pm:

    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?

  26. luokai wrote on January 4th, 2011 at 1:11 am:

    please give me Demo Code ,please please, think you

  27. Dave Merrill wrote on March 17th, 2011 at 5:05 am:

    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.

    Sorry for the static,

    Dave

  28. lionel wrote on April 13th, 2011 at 6:01 am:

    This demo is not working well with ff4 or chrome 10. Apparently the dragout event is fired unexpectedly (at least I don’t get why)

    Has someone any idea about this issue?

  29. renato wrote on May 26th, 2011 at 12:56 am:

    I found it difficult to make compatible with google gears (drag and drop) with firefox 5.0 I have resolved to put this code in the div booster

  30. Sitebase wrote on October 28th, 2011 at 1:54 am:

    This is super cool. A great way to handle file uploads.

  31. Pingback from interactive file uploads with Drag and Drop, FileAPI and XMLHttpRequest ✩ Mozilla Hacks – the Web developer blog on April 13th, 2012 at 4:20 am:

    [...] Older Article [...]

  32. ling wrote on July 1st, 2012 at 12:23 am:

    I cannot access the source files. Is there any github for this demo ?

Comments are closed for this article.