Dropzone.js – Drag-and-Drop File Uploads

Dropzone.js is an open source JavaScript library for enabling drag-drop file uploads with image previews. It doesn’t require jQuery to work but this library still registers itself as a jQuery module and is also available as an AMD module for RequireJS.


Installing dropzone.js is pretty simple – all you have to do is reference the JS file in your code and assign a class for the dropzone. Once activated, the library will scan your form elements for that specific CSS class and attach a dropzone to it.

It is worth noting that dropzone.js does not provide the server side implementation of handling the uploaded files. Given that it uses the same approach as a traditional upload form, you shouldn’t have issues coding the server-side part using your language of choice.

In terms of compatibility, dropzone should work fine across most modern browsers including IE 10+, Firefox 4+, Chrome 7+ and Safari 6+. For older browsers, you can implement a fallback using the pre-defined ‘fallback’ class provided by the library.

Overall, dropzone.js is a neat solution for file upload especially if your web application deals with large image files where image preview is required.