Is there a good jQuery Drag-and-drop file upload plugin?

Question

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this:

$j('#MyForm').enableDragDropUploads('.upload-area')

With the upload target being the action of the form.

Any solution must not prevent a regular file field from being usable (using traditional browse method).

I only need one file at a time, though of course having the option for multiple isn't a bad thing.

I've found a couple of drag-drop upload examples:
http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

But the code there isn't setup as a plugin. It's probably not too difficult to change it, but also no point doing so if someone else has already done that work and is simply evading my Google searches.

I'm ideally looking for a pure HTML5/jQuery solution.
A Google Gears one is acceptable, but a Flash solution is not.

Answer 1

Yes, i wrote it some time ago - http://kurapov.name/eng/drag_drop_file_upload/

(same in russian - http://kurapov.name/rus/technology/drag_drop_fileupload_html5/ )

Answer 2

In general, you can't do that -- it isn't something HTML can support. Most drag and drop file uploaders use Flash.

However, HTML v5 does support what you're looking for. The bad news is, it isn't supported by most browsers -- not even the recently released Firefox 3.5.

I'm afraid you're just out of luck unless you want to use Flash or Google Gears or something.

Answer 3

Check out the recently¹ released upload handler from the guys that created the TinyMCE editor. It has a jQuery widget and looks like it has a nice set of features and fallbacks.

http://www.plupload.com/

Answer 4

If you are still looking for one, I just released mine: http://github.com/weixiyen/jquery-filedrop

Works for Firefox 3.6 right now. I decided not to do the Chrome hack for now and let Webkit catch up with FileReader() in the next versions of Safari and Chrome.

This plugin is future compatible.

FileReader() is the official standard over something like XHR.getAsBinary() which is deprecated according to mozilla.

It's also the only HTML5 desktop drag+drop plugin out there that I know of which allows you to send extra data along with the file, including data that can be calculated at the time of upload with a callback function.

Answer 5

I created a plugin which allows you to drop some files onto a given area. This plugin currently works in Firefox, Safari and Chrome.

http://code.google.com/p/dnd-file-upload/