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.