DropzoneJS - provides drag'n'drop file uploads with image previews

DropzoneJS is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.

DropzoneJS - Features:

• Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
• Retina enabled
• Multiple files and synchronous uploads
• Progress updates
• Support for large files
• Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.
• Well tested

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" />