DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. Plugin page.
To use the plugin, you need to add the following files.
<!-- Css -->
<link rel="stylesheet" href="libs/dropzone/dropzone.css" type="text/css">
<!-- Javascript -->
<script src="libs/dropzone/dropzone.js"></script>The typical way of using dropzone is by creating a form element with the class dropzone:
<form action="/file-upload" class="dropzone">
...
</form>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 like this:
<input type="file" name="file" />