Drag And Drop Upload (Image Preview) With Dropzone.js

Dropzone.js a simplified javascript library for creating drag and drop functionality with image preview on your projects. Unlike other similar javascript libraries, Dropzone would let you to customize almost everything.

With Dropzone we can customize image file size, dropzone items to be clickable or not, width and height of the generated thumbnail, fallback input field for unsupported browsers. Loads of things to customize.

Installation

Download Dragzone.js from their website here.

<script src="./path/to/jquery/1.8/jquery.min.js"></script>
<script src="./path/to/dropzone.js"></script>

Usage

Try to stick with the same class name and enter the appropriate id name.

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

Further instructions, kindly refer the developer’s website.