DropzoneJS

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 and is highly customizable.

Page Demo Plugin Website

Basic example

Basic DropzoneJS example with least configurations.

<form class="dropzone" id="dropzone-upload"></form>
// Disable Dropzone auto discover
if($('#dropzone-upload')[0]) {
    Dropzone.autoDiscover = false;
}

// Initiate Dropzone JS
if($('#dropzone-upload')[0]) {
    $('#dropzone-upload').dropzone({
        url: "/file/post",
        addRemoveLinks: true
    });
}
Files required:
Type Files
Custom SCSS /src/scss/inc/vendor-overrides/_dropzone.scss
Javascript /src/js/vendors/dropzone.js
Library /resources/vendors/dropzone/dropzone.css /resources/vendors/dropzone/dropzone.min.js