Problem
Is there a beautiful, clean jQuery plugin that allows you to include a single JS script and then enable a form with a simple snippet? Something along these lines:
$j('#MyForm').enableDragDropUploads('.upload-area')
With the form’s action being the upload target.
Any solution must not prevent the use of a standard file field (using traditional browse method).
I only require one file at a time, yet having the choice of many files isn’t a bad thing.
I found a handful of examples of drag-and-drop uploads: 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
However, the code isn’t set up as a plugin. It’s probably not difficult to modify it, but there’s no sense if someone else has already done so and is avoiding my Google searches.
I’m searching for a solution that uses only HTML5 and jQuery. A Google Gears solution is okay, but not a Flash one.
Asked by Peter Boughton
Solution #1
Check out the upload handler that was recently released by the same people who built the TinyMCE editor. It includes a jQuery widget and appears to have a comprehensive set of capabilities and fallbacks.
http://www.plupload.com/
Answered by Aaron Wagner
Solution #2
http://blueimp.github.com/jQuery-File-Upload/ = excellent solution
Drag and drop is supported by the following browsers, according to their documentation:
Answered by Tommy W
Solution #3
Dropzonejs is a good choice if you’re searching for something that doesn’t rely on Flash. It allows you to drag and drop numerous files.
http://www.dropzonejs.com/
Answered by Ross Gledhill
Solution #4
If you’re still looking for one, here’s what I came up with: http://github.com/weixiyen/jquery-filedrop
Right now, it only works with Firefox 3.6. For the time being, I’ve opted to skip the Chrome hack and wait for Webkit to catch up to FileReader() in future versions of Safari and Chrome.
This plugin will work in the future.
Over anything like XHR, FileReader() is the official standard. According to Mozilla, getAsBinary() is deprecated.
It’s also the only HTML5 desktop drag+drop plugin I’m aware of that allows you to send additional data with the file, such as data that can be calculated during the upload via a callback function.
Answered by resopollution
Solution #5
I made a plugin that allows you to drop files into a certain region. This plugin is compatible with Firefox, Safari, and Chrome at the moment.
http://code.google.com/p/dnd-file-upload/
Answered by user340084
Post is based on https://stackoverflow.com/questions/1663741/is-there-a-good-jquery-drag-and-drop-file-upload-plugin