How to drag and drop multiple files using Dropzone.js

While uploading files instead of selecting files from file manager, we wish to drag those files and drop them in web page, This blog post will give you an idea of how to make a div or particular form to accept the files that are dragged on to them from File Manager. we will use Dropzone.js library which is a lightweight open source library that turns a DOM element in a web page into Dropzone. This enables the user to drag the files on to that area and those files will be uploaded to server via Ajax.

Download the dropzone File here Dropzone.js and include the path to dropzone.js file.

Now dropzone is activated and ready to be used in your web page. Dropzone does not support server side validations and data handling it only enables you to handle your dragged files in client side. you need to implement the code to recieve or handle the data in server side.

How to Use Dropzone:

Just giving class name as dropzone to the Form will do it all. Dropzone will find all the form elements in form which containing class dropzone and attach itself to that. and dropzone will upload the files dragged into that to the given action attribute.

we can even create dropzones on non form DOM elements by instantiating dropzone class.

var myDropzone = new Dropzone("div#yourId", { url: "/file/upload/"})

or we can instantiate dropzone class with jquery like :

$("div#yourId").dropzone({ url: "/file/upload/" })

you must provide action url option while using dropzone on non form elements as dropzone do not know where to post the dragged files without action attribute.

Dropzone Configuration:

we can instantiate dropzone on a DOM element in two ways as mentioned earlier one is by giving lass dropzone to the desired element or instantiating the dropzone object on that element, we can provide configure options here while creating dropzone on that element. If we have the elements with dropzone class we need to store configurations manually so the dropzone wil know how to configure dropzone.

Dropzone.options.myDropzone = { paramName: "file", maxFilesize: 2, // MB }

Dropzone automatically discovers the elements with dropzone class and automatically attach itself to it. if ou want to stop this and wish to manually instantiate dropzone you can achieve that by using disabling autodiscover behaviour of the dropzone. you can do that on particular element or on the whole page.

Dropzone.options.myDropzone = false; //preventing dropzone from auto discovering this element
Dropzone.autoDiscover = false //preventing dropzone from auto discover on all elements

There are a lot of Configuration options for dropzone, here i am only listing few most useful options, you can check full configurations and Documentation of Dropzone Here.

  1. Url
    • We must provide URL option on non-form elements and when the form does not have an action attribute
  2. parallelUploads
    • number of files uploaded to the server at a time, files are sent to the server in the queue. files will be processed one after other or 'n' number of files if given more than one here.
  3. uploadMultiple
    • This enables to send multiple files in a single request.
  4. maxFilesize
    • This number defines the maximum file size you are allowed to upload, if the file size exceeds this value it returns FileSizeExceeds error message
  5. paramName
    • The name of the file attribute that gets uploaded to server, default name is 'file', you can change that name by giving this option.
  6. createImageThumbnails
    • Thumbnails will be created for uploaded images if set to True.
  7. maxFiles
    • Defines the Max Number of files you are allowed to upload
  8. acceptedFiles
    • We can mention the files mime types we wanted to accept, other files selected will get an error message. This acts as accept parameter in HTML file tag.
  9. autoProcessQueue
    • The default is True, FIles automatically processed to the server by ajax, If this set to false processing will not be invoked automatically, you have to invoke the processing by calling myDropzone.processQueue()
  10. addRemoveLinks
    • If Given True, processed files will get a link to remove that file preview from dropzone.

Posted On 30 June 2018 By MicroPyramid

Need any Help in your Project?Let's Talk

Latest Comments
Setting up reactjs environment & first reactjs app(hello-world)

create your first react application hello-world from scratch. A step by step guide to understand and setup the reactjs environment. Understand the node package manager …

Continue Reading...
How to drag and drop multiple files using Dropzone.js

Dropzone is a free open source library which makes a HTML element as dropzone, which enables user to drag files on to that area and …

Continue Reading...
How to use jQuery mobile touch events

JQuery mobile touch events - Event is nothing but all possible and different actions of visitors that a webpage can respond to. We have the …

Continue Reading...
Copy Text to ClipBoard event using Javascript

Here you can learn about copy to clipboard using JavaScript. Copying content from a web form without needing to use the default browser functions. For …

Continue Reading...
Using CasperJS to scrape website data

CasperJS can be used for Navigation Scipting, Scraping and testing. In this Tutorial we will see how to scrape data from website using CasperJS and …

Continue Reading...
Google Analytics Graphs to your Dashboard in Python Web Frameworks

Ecommerce solution providers like OpenCart, Magento Provide extensions to see Google analytics data in their own dashboards as graphs. whereas there are no such plugins …

Continue Reading...
Tracking your Product Sales, Views and Searches with Google Enhanced E-commerce Analytics

Enhanced E-commerce helps improving tracking of an ecommerce website. It gives Statistics in variable measurements. It is not be used alongside analytics plugin, as this …

Continue Reading...
jQuery mouse events and touch events

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler …

Continue Reading...
Image Cropping in Jquery (with Jcrop)

We are having many image cropping plugins developed in jquery that are being used to crop an image. Jcrop is one of the plugins developed …

Continue Reading...
Get tweets with Twitter API Javascript

Due to change in twitter API, its been hard to get tweets from twitter to your site using javascript. We got new API version 1.1 …

Continue Reading...
Event Delegation in Jquery

Event handling is the basic need to develop Rich Internet Web Applications and that will become very tough with elements added to DOM dynamically. Jquery …

Continue Reading...

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties