DropZone

DropZone is an awesome lightweight library that you can use for Drag & Drop type of uploads with image previews

Getting started

You need to include the following javascript file before the end of the body tag:

<script src="@@path/vendor/dropzone/dist/min/dropzone.min.js"></script>

And you also need to add the following stylesheet before the end of the head tag:

<link type="text/css" href="@@path/vendor/dropzone/dist/min/dropzone.min.css" rel="stylesheet">

Initializing a dropzone area

Use the following markup to create a DropZone element:

<form action="/file-upload" class="dropzone rounded mb-4">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

Javascript

Initializing the dropzone is fairly straightforward. Here’s how we use it in volt.js:

if(d.querySelector('myDropzone')) {
    // Dropzone class:
    var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
}

Check out more of the configuration options from the official plugin documentation.