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.

That solution Only works in the Bleeding edge version of firefox. It has no support outside of firefox 3.6 currently. As that is the case you're unlikely to find a jQuery plugin for it and you'd most likely need to make it yourself. — Jojo, Nov 03 '09 at 00:45
Bah. Alpha version has been out a couple of months, that should be long enough. :/ I guess I'll go create the plugin myself then. Will answer the question once I've finished it. — Peter Boughton, Nov 04 '09 at 00:00
@PeterBoughton If you haven't finished that plugin yet, you may want to accept an answer — Basic, Feb 23 '12 at 23:17
Thanks for prompt Basic. Haven't looked at this in ages, but seems there's a clear favourite (and from a quick look it seems decent), so I'll accept that one. — Peter Boughton, Feb 25 '12 at 20:56
For a fast moving, exceptionally supported, and feature-rich JavaScript uploader with no dependencies, have a look at [Fine Uploader](http://fineuploader.com), formerly known as valums/file-uploader. — Ray Nicholus, Jan 15 '14 at 14:49

score 30 · Answer 1 · answered Feb 05 '10 at 22:45

30

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/

answered Feb 05 '10 at 22:45

Aaron Wagner

5,739
1
31
38

I'd advise using plupload as it takes advantage of other technologies for the best user experience. – rickyduck Aug 08 '11 at 09:53
The all_runtime doesn't work for me in Chrome 15, which should be the point, try for yourself: http://www.plupload.com/example_all_runtimes.php – Erik Johansson Nov 03 '11 at 09:46
1

It's not free for commercial use (uses GPL for free version) – Sachin Joseph May 17 '14 at 02:22

score 18 · Answer 2 · edited Sep 04 '13 at 13:44

18

http://blueimp.github.com/jQuery-File-Upload/ = great solution

According to their docs, the following browsers support drag & drop:

Firefox 4+
Safari 5+
Google Chrome
Microsoft Internet Explorer 10.0+

edited Sep 04 '13 at 13:44

Yarin

173,523
149
402
512

answered Jan 06 '12 at 15:19

Tommy W

649
6
8

Ross Gledhill · Answer 3 · 2014-01-15T10:46:23.390

16

If you're looking for one that doesn't rely on Flash then dropzonejs is a good shout. It supports multiple files and drag and drop.

http://www.dropzonejs.com/

edited Jan 15 '14 at 10:46

answered May 22 '12 at 14:51

Ross Gledhill

662
7
15

Your original recommendation moved to https://github.com/Widen/fine-uploader in March. – Ray Nicholus Jan 15 '14 at 14:51
Thanks for that. Looks like it's now a paid offering though (for commercial use). – Ross Gledhill Jan 16 '14 at 14:44
That's correct. We can't provide the level of support & speed of development that we offer for free. – Ray Nicholus Jan 16 '14 at 14:57
Here's a nice tutorial of drag / drop image upload using dropzonejs http://goo.gl/FVdkS0 – Satinder singh Aug 18 '15 at 17:18
Not easy to integrate with existing form. That's why I have decided to move away from dropzone. – Usman Khalid Sep 05 '15 at 07:15

score 15 · Answer 4 · answered Jun 22 '10 at 08:04

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.

Documentation is a bit thin on this one (even now in 2013) but it works decently well. — dansan, Mar 24 '13 at 13:41

score 9 · Answer 5 · answered Jul 07 '10 at 09:36

9

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/

answered Jul 07 '10 at 09:36

user340084

115
1
2

score 8 · Answer 6 · answered Jun 21 '12 at 23:35

8

Shameless Plug:

Filepicker.io handles uploading for you and returns a url. It supports drag/drop, cross browser. Also, people can upload from Dropbox/Facebook/Gmail which is super handy on a mobile device.

answered Jun 21 '12 at 23:35

Liyan Chang

7,721
3
39
59

score 4 · Answer 7 · answered Aug 08 '11 at 09:52

4

How about the latest version of jQuery Fileuploader: http://pixelcone.com/fileuploader/

Its a powerful file upload plugin, very easy to setup compared to other plugin, and its now support html5 api.

answered Aug 08 '11 at 09:52

John Laniba

435
3
12

1

Under what license(s) is jQuery Fileuploader available? You really should clarify this both on your website and in the source code of your plugin as well, I think. :) – OpaCitiZen Jan 02 '12 at 12:54
Broken link, is [this one](https://github.com/johnlanz/jquery-fileuploader) correct? – Puce Feb 25 '15 at 11:13

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

7 Answers7

Linked