File Under: HTML5, JavaScript

Dropzone.js Adds Drag-and-Drop File Uploads to Any Site

New web technologies tend to travel a trajectory that moves from “amazing demo with fiendishly complex code”, to “very cool product feature” and finally to open source library that takes 10 seconds to add to your page. Today’s cutting edge demo is tomorrow’s jQuery plugin.

Take drag-and-drop file uploads for instance. The HTML5 File API ostensibly solves one of the most common complaints from web app users — why can’t I just drag and drop files like I do everywhere else? Well, then you could, but it wasn’t easy to build.

Then drag-and-drop file uploads became part of Gmail, which meant it was only a matter of time before a jQuery plugin appeared. In fact there are several jQuery plugins that cover this ground, but one particularly nice newcomer is Dropzone.js.

Dropzone.js makes it dead simple to add a drag-and-drop file uploader to any website, complete with previews of uploaded files. Dropzone also supports the traditional file-picker uploading as well; you don’t have to drag and drop.

Dropzone supports most modern web browsers, including Chrome 7+, Firefox 4+, IE 10+ and Safari 5.

If you’re interested, head on over to GitHub and grab the source code (obviously the plugin requires jQuery, but there is a version that will work with RequireJS as well). Also be sure to read through this Hacker News thread for some similar projects and possible alternatives for those who’d like to avoid the jQuery overhead.