Description
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.
Warning! Don’t forget to specify an url option if you’re not using a form element, since Dropzone doesn't know where to post to without an action attribute.
Warning! Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself. See the section Server side implementation for more information.
Initialization
Initialize the plugin by referencing the necessary files:
<script src="/path/to/dropzone.min.js"></script>The typical way of using dropzone is by creating a form element with the class dropzone. That’s it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. The uploaded files can be handled just as if there would have been a html input.
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
Alternatively you can create dropzones programmatically (even on non form elements) by instantiating the Dropzone class
// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});// jQuery
$("div#myId").dropzone({ url: "/file/post" });Refer following links for usage:
| Type | URL |
|---|---|
| Plugin Github Page | https://github.com/enyo/dropzone |
| Template Page | https://pixinvent.com/demo/convex-bootstrap-admin-dashboard-template/demo-1/upload.html |