Creating a Mozilla/Firefox Drag and Drop file upload Script (Part 1)

Drag and drop upload of a file into Mozilla is possible? This promises to deliver that formerly IE – Windows only capability. Yay.

Creating a Mozilla/Firefox Drag and Drop file upload Script (Part 1)

There has been a lot of focus lately on web applications which have enhanced rich-client functionality, such as the oft-published AJAX approach adopted by Google Maps and GMail. One of the features which is present for desktop applications but which is difficult to accomplish with a web page is drag and drop of something that didn’t start off on the webpage (for example, dragging an image around a webpage is fairly easy to do, however dragging a file or shortcut from the desktop onto the webpage is much more difficult). In addition, although such functionality exists and is fairly easy to access with an ActiveX control for Internet Explorer, it is difficult to replicate inside of a Mozilla/Firefox browser due to the inherent complexities of cross-platform support as well as the stronger security model.

However, difficult does not mean impossible, and this article will describe how to create a control which allows a user to drag a file onto a webpage and upload it (automatically if desired) to a given server. I will mention now that this first part of the discussion will create a file which functions correctly on the local machine – Part 2 will deal with the difficulties of packaging up this code in a Jar, signing that Jar, and deploying it on a remote server.

Creating a Mozilla/Firefox Drag and Drop file upload Script (Part 1) (

, ,

2 responses to “Creating a Mozilla/Firefox Drag and Drop file upload Script (Part 1)”

  1. I managed to implement this for drag-dropping a file out of a (desktop) folder onto an img tag in a webpage in Firefox, triggering an Ajax upload to the server and DOM replacement of the src attribute to match, only to struggle to work out how to do the same thing in Internet Explorer. Do you happen to know of any concrete examples?

  2. Hi,

    your article was really helpful. But I do not find how this could be implemented for IE. Do you have anything which works for IE the way you put it here for Mozilla?


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

sell diamonds