Dropzone

Drag'n'drop file-attach uploads with image previews.

Official documentation

For more detailed information and examples, see the official documentation: Dropzone.js .

How to use? #

Copy-paste the following <script> near the end of your pages to enable it.

<script src="vendors/uploader/js/dropzone.min.js"></script>

Place this code, which contains everything you need, within the <head> of each template or page that you want to use Dropzone on.

<link rel="stylesheet" href="vendors/uploader/css/dropzone.min.css">

Add attributes data-uploader="true" to init dropzone and data-uploader-url to provide url for dropzone process upload image

Drag & Drop files here or

<div class="dropzone upload-file text-center" data-uploader="true"
     id="myDropzone"
     data-uploader-url="./page-submit-listing.html">
    <div class="dz-default dz-message">
        <div class="title">
            <span>Drag & Drop files here</span>
            <span>or</span>
        </div>
        <div class="upload-btn-wrapper">
            <button class="btn btn-primary font-size-md px-5 lh-12">Browse Files</button>
            <input type="file" name="myfile">
        </div>
    </div>
</div>