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.
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.
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.
Micropyramid is a software development and cloud consulting partner for enterprise businesses across the world. We work on python, Django, Salesforce, Angular, Reactjs, React Native, MySQL, PostgreSQL, Docker, Linux, Ansible, git, amazon web services. We are Amazon and salesforce consulting partner with 5 years of cloud architect experience. We develop e-commerce, retail, banking, machine learning, CMS, CRM web and mobile applications.
Django-CRM :Customer relationship management based on Django
Django-blog-it : django blog with complete customization and ready to use with one click installer Edit
Django-webpacker : A django compressor tool
Django-MFA : Multi Factor Authentication
Docker-box : Web Interface to manage full blown docker containers and images
More...