Let’s face it, nobody likes forms. Developers don’t like building them, designers don’t particularly enjoy styling them and users certainly don’t like filling them in.
Of all the components that can make up a form, the file control could just be the most frustrating of the lot. A real pain to style, clunky and awkward to use and uploading a file will slow down the submission process of any form.
That’s why a plugin to enhance them is always worth a look, and DropzoneJS is just one such option. It will make your file upload controls look better, make them more user-friendly and by using AJAX to upload the file in the background, at the very least make the process seem quicker. It also makes it easier to validate files before they even reach your server, providing near-instananeous feedback to the user.
We’re going to take a look at DropzoneJS in some detail; show how to implement it and look at some of the ways in which it can be tweaked and customized. We’ll also implement a simple server-side upload mechanism using Node.js.
As ever, you can find the code for this tutorial on our GitHub repository.
As the name implies, DropzoneJS allows users to upload files using drag n’ drop. Whilst the usability benefits could justifiably be debated, it’s an increasingly common approach and one which is in tune with the way a lot of people work with files on their desktop. It’s also pretty well supported across major browsers.
DropzoneJS isn’t simply a drag n’drop based widget, however; clicking the widget launches the more conventional file chooser dialog approach.
Here’s an animation of the widget in action:
Alternatively, take a look at this, most minimal of examples.
You can use DropzoneJS for any type of file, though the nice little thumbnail effect makes it ideally suited to uploading images in particular.
To summarize some of the plugin’s features and characteristics:
Can be used with or without jQuery
Drag and drop support
Generates thumbnail images
Supports multiple uploads, optionally in parallel
Includes a progress bar
Extensible file validation support
Available as an AMD module or RequireJS module
It comes in at around 33Kb when minified
Taken from the official documentation, browser support is as follows:
Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
There are a couple of ways to handle fallbacks for when the plugin isn’t fully supported, which we’ll look at later.
The simplest way to install DropzoneJS is via Bower:
bower install dropzone
There are also third-party packages providing support for ReactJS and implementing the widget as an Angular directive.
If you’ve used the Bower or download method, make sure you include both the main JS file and the styles (or include them into your application’s stylesheet), e.g: