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.


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) {
}, true);
dropzone.addEventListener("drop", function(event) {
  // 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) {
  // 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.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Gilberto Ramos

    A MA ZING!!!

    December 14th, 2009 at 12:47

  2. Jose

    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?

    December 14th, 2009 at 14:12

  3. Yehuda B.

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

    View the screencast (no sound):

    Try for yourself with Firefox 3.6:

    December 14th, 2009 at 14:22

  4. Fritz

    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.

    December 14th, 2009 at 15:12

  5. K

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

    December 15th, 2009 at 01:25

  6. paul

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

    December 15th, 2009 at 04:13

  7. Aditya

    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.

    December 15th, 2009 at 11:02

  8. […] 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 […]

    December 28th, 2009 at 17:51

  9. […] file drag and drop in Firefox 3.6 ( […]

    January 5th, 2010 at 08:42

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

    January 13th, 2010 at 04:22

  11. Aurélio

    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)

    January 20th, 2010 at 07:12

  12. […] 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 […]

    January 24th, 2010 at 19:57

  13. […] drag and drop […]

    January 26th, 2010 at 04:30

  14. Michael Butler

    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!

    February 4th, 2010 at 16:16

  15. bond

    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 !!

    February 20th, 2010 at 07:46

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

    February 24th, 2010 at 06:19

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

    March 5th, 2010 at 02:14

  18. qwazix

    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

    April 15th, 2010 at 07:06

  19. another_sam

    Ask for this on Google Docs

    April 16th, 2010 at 13:33

  20. Elixon

    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?

    April 30th, 2010 at 15:29

  21. Edmond

    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?

    June 15th, 2010 at 05:50

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

    July 7th, 2010 at 09:04

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

    July 7th, 2010 at 09:21

  24. Komrade Killjoy


    July 28th, 2010 at 05:46

  25. pd

    This is a great demo. The doco on MDC is not good enough. 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?

    August 9th, 2010 at 23:13

  26. luokai

    please give me Demo Code ,please please, think you

    January 4th, 2011 at 01:11

  27. Dave Merrill

    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,


    March 17th, 2011 at 05:05

  28. lionel

    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?

    April 13th, 2011 at 06:01

  29. renato

    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

    May 26th, 2011 at 00:56

  30. Sitebase

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

    October 28th, 2011 at 01:54

  31. […] Older Article […]

    April 13th, 2012 at 04:20

  32. ling

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

    July 1st, 2012 at 00:23

Comments are closed for this article.