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

Asked 2/11, 2009 at 21:12 Answered 21/6, 2012 at 23:35

jquery file-upload drag-and-drop html google-gears

174

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.

Gingersnap answered 2/11, 2009 at 21:12 Comment(6)

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. – Fitting 3/11, 2009 at 0: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. – Gingersnap 4/11, 2009 at 0:0

@PeterBoughton If you haven't finished that plugin yet, you may want to accept an answer – Parrakeet 23/2, 2012 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. – Gingersnap 25/2, 2012 at 20:56

For a fast moving, exceptionally supported, and feature-rich JavaScript uploader with no dependencies, have a look at Fine Uploader, formerly known as valums/file-uploader. – Beveridge 15/1, 2014 at 14:49

i always use dropzonejs – Trilley 17/8, 2015 at 10:42

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/

Belinda answered 5/2, 2010 at 22:45 Comment(3)

I'd advise using plupload as it takes advantage of other technologies for the best user experience. – Anaesthesia 8/8, 2011 at 9:53

The all_runtime doesn't work for me in Chrome 15, which should be the point, try for yourself: plupload.com/example_all_runtimes.php – Honky 3/11, 2011 at 9:46

It's not free for commercial use (uses GPL for free version) – Gravelly 17/5, 2014 at 2:22

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+

Unterwalden answered 6/1, 2012 at 15:19 Comment(0)

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/

Promptitude answered 22/5, 2012 at 14:51 Comment(5)

Your original recommendation moved to github.com/Widen/fine-uploader in March. – Beveridge 15/1, 2014 at 14:51

Thanks for that. Looks like it's now a paid offering though (for commercial use). – Promptitude 16/1, 2014 at 14:44

That's correct. We can't provide the level of support & speed of development that we offer for free. – Beveridge 16/1, 2014 at 14:57

Here's a nice tutorial of drag / drop image upload using dropzonejs goo.gl/FVdkS0 – Solarism 18/8, 2015 at 17:18

Not easy to integrate with existing form. That's why I have decided to move away from dropzone. – Periwig 5/9, 2015 at 7:15

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.

Nagual answered 22/6, 2010 at 8:4 Comment(2)

Documentation is a bit thin on this one (even now in 2013) but it works decently well. – Bifoliolate 24/3, 2013 at 13:41

But no demo?! whats up with that. – Nondisjunction 28/7, 2017 at 13:38

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/

Kindrakindred answered 7/7, 2010 at 9:36 Comment(0)

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.

Syllable answered 21/6, 2012 at 23:35 Comment(0)

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.

Agate answered 8/8, 2011 at 9:52 Comment(2)

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. :) – Carolinian 2/1, 2012 at 12:54

Broken link, is this one correct? – Gannon 25/2, 2015 at 11:13

Recommended topics

Hot tags