I always love it when websites provide the drag and drop functionality to upload images or file when uploading. So easy! It’s just intuitive that’s what makes it the best component of UI. After all, a good UI should always be intuitive and responsive to the user.

How do Dropzonejs work?

DropzoneJS is an open source library which provides drag-and-drop file uploads with image previews. To use it in your website all you have to do is include a form tag with class= “dropzone” and there should be an action attribute to specify what you want to do with the file. 

<form action = "scriptfile.php"
        class = "dropzone"></form>

You can also override the styles given by the DropzoneJS if you want to. 

The Drupal DropzoneJS module implements all the above steps for you, but unfortunately, it is confined to editorial improvements. However, the dev community is working to bring it to the user side for a better interface.

Using DropzoneJs for editorial improvements in Drupal

In Drupal the DropzoneJs can be used for the editorial improvements, to makes things easy with just a drag and drop to upload while adding images or file when using the editor. It works with Entity Browser module.

• Install the modules by using the following drush command in your terminal:

drush en dropzonejs, dropzonejs_entity_browser_widget -y

• You can also manually install the modules.
   
• After installing and enabling those two modules. Go to Configuration > Entity Browser > Click on Add Entity Browser.
   
• Set you suitable configuration, you will be assisted with hints/ documentation below them, here is my configuration, I gave a label as Dropzone, selected Display Plugin Modal, you can also use your custom view for Selection display plugin. Hit Next after setting the configuration.

• Set the display size of the DropzoneJS widget and click Next. I used default settings.

• After you are done setting up your configuration click on Finish.

• Select the DropzoneJS widget. After you done setting up the Entity Browser, go to Structure > Content Types > Click on Manage fields for Article content type.
   
• Go to Manage form >> Display tab >> Find the Image field >> Set it to Entity browser >> Hit Save.

You are done, easy isn’t it? When you edit your article, you should see an image tab. Open it to add entities. Here we set it up to add images you can set it to whatever you want it to be.

Here we can see our DropzoneJS in action. Just drag and drop your images.

Easy to Use Tips when using Dropzone

• If you do not want the default message at all (»Drop files to upload (or click)«), you can put an element inside your dropzone element with the class dz-message and dropzone will not create the message for you.
   
• Dropzone will submit any hidden fields you have in your dropzone form. An easy way to submit additional data. You can also use the params option.
   
• Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if, it’s an image, as well as a file. Upload which is an object containing: progress (0-100), total (the total bytes) and bytesSent.
   
• If you want to add additional data to the file upload that has to be specific for each file, you can register for the sending event.
   
• If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the previewsContainer option. The previewsContainer should have the dropzone-previews or dropzone class to properly display the file previews.

DropzoneJS can be a commendable component of a good UI. Considered as a no-brainer it is elegant in using it in place of Browse Files is the best option most of the times. Let us know in the comments below how you it helped you.