Open Source Drag & Drop File Uploads with Dropzone.js

Dropzone.js is an open source library that provides drag’n’drop file uploads by simply including a java-script file. It views previews of images and you can register to different events to control how and which files are uploaded.

It supports Chrome 7+, Firefox 4+, IE 10+, Opera 12+ and Safari 5+. For all the other browsers, dropzone provides an old school file input fallback. It is released under MIT License.

Download the standalone dropzone.js and include it along with jQuery like this:

<script src="./path/to/jquery/1.8/jquery.min.js"></script>
<script src="./path/to/dropzone.js"></script>

Dropzone is now activated and available as window.Dropzone.

The typical way of using dropzone is by creating a form element with the class dropzone:

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

That’s it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. The uploaded files can be handled just as if there would have been a html input like this:

<input type="file" name="file" />