Documentation v8.0.9

Overview

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable. For full documentation please check the plugin's official site.

Usage

DropzoneJS's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages:
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>

Initialization

  • DropzoneJS CSS is highly customized in sass/vendors/plugins/_dropzone.scssSCSS file in order to use it as native component within the design system. The SCSS code is compiled into assets/plugins/global/plugins.bundle.cssand globally included in all pages.
  • DropzoneJS Javascript is globally initialized with some predefined settings in src/js/vendors/plugins/dropzone.init.jsand the initialization code is bundled within assets/plugins/global/plugins.bundle.jsand globally included in all pages.

Basic Example

DropzoneJS example with manual file attachment and upload controls.

Drop files here or click to upload.

Upload up to 10 files
var myDropzone = new Dropzone("#kt_dropzonejs_example_1", {
    url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
    paramName: "file", // The name that will be used to transfer the file
    maxFiles: 10,
    maxFilesize: 10, // MB
    addRemoveLinks: true,
    accept: function(file, done) {
        if (file.name == "wow.jpg") {
            done("Naha, you don't.");
        } else {
            done();
        }
    }
});
<!--begin::Form-->
<form class="form" action="#" method="post">
    <!--begin::Input group-->
    <div class="fv-row">
        <!--begin::Dropzone-->
        <div class="dropzone" id="kt_dropzonejs_example_1">
            <!--begin::Message-->
            <div class="dz-message needsclick">
                <!--begin::Icon-->
                <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
                <!--end::Icon-->

                <!--begin::Info-->
                <div class="ms-4">
                    <h3 class="fs-5 fw-bolder text-gray-900 mb-1">Drop files here or click to upload.</h3>
                    <span class="fs-7 fw-bold text-gray-400">Upload up to 10 files</span>
                </div>
                <!--end::Info-->
            </div>
        </div>
        <!--end::Dropzone-->
    </div>
    <!--end::Input group-->
</form>
<!--end::Form-->

Queue Upload

DropzoneJS example with multiple file attachment with preview and cancel action.
Max file size is 1MB and max number of files is 5.
// set the dropzone container id
var id = "#kt_dropzonejs_example_2";

// set the preview element template
var previewNode = $(id + " .dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parent(".dropzone-items").html();
previewNode.remove();

var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
    url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    maxFilesize: 1, // Max filesize in MB
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: id + " .dropzone-items", // Define the container to display the previews
    clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
});

myDropzone.on("addedfile", function(file) {
    // Hookup the start button
    file.previewElement.querySelector(id + " .dropzone-start").onclick = function() { myDropzone.enqueueFile(file); };
    $(document).find( id + " .dropzone-item").css("display", "");
    $( id + " .dropzone-upload, " + id + " .dropzone-remove-all").css("display", "inline-block");
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
    $(this).find( id + " .progress-bar").css("width", progress + "%");
});

myDropzone.on("sending", function(file) {
    // Show the total progress bar when upload starts
    $( id + " .progress-bar").css("opacity", "1");
    // And disable the start button
    file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
});

// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("complete", function(progress) {
    var thisProgressBar = id + " .dz-complete";
    setTimeout(function(){
        $( thisProgressBar + " .progress-bar, " + thisProgressBar + " .progress, " + thisProgressBar + " .dropzone-start").css("opacity", "0");
    }, 300)

});

// Setup the buttons for all transfers
document.querySelector( id + " .dropzone-upload").onclick = function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};

// Setup the button for remove all files
document.querySelector(id + " .dropzone-remove-all").onclick = function() {
    $( id + " .dropzone-upload, " + id + " .dropzone-remove-all").css("display", "none");
    myDropzone.removeAllFiles(true);
};

// On all files completed upload
myDropzone.on("queuecomplete", function(progress){
    $( id + " .dropzone-upload").css("display", "none");
});

// On all files removed
myDropzone.on("removedfile", function(file){
    if(myDropzone.files.length < 1) {
        $( id + " .dropzone-upload, " + id + " .dropzone-remove-all").css("display", "none");
    }
});
<!--begin::Form-->
<form class="form" action="#" method="post">
    <!--begin::Input group-->
    <div class="form-group row">
        <!--begin::Label-->
        <label class="col-lg-2 col-form-label text-lg-right">Upload Files:</label>
        <!--end::Label-->

        <!--begin::Col-->
        <div class="col-lg-10">
            <!--begin::Dropzone-->
            <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_example_2">
                <!--begin::Controls-->
                <div class="dropzone-panel mb-lg-0 mb-2">
                    <a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a>
                    <a class="dropzone-upload btn btn-sm btn-light-primary me-2">Upload All</a>
                    <a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a>
                </div>
                <!--end::Controls-->

                <!--begin::Items-->
                <div class="dropzone-items wm-200px">
                    <div class="dropzone-item" style="display:none">
                        <!--begin::File-->
                        <div class="dropzone-file">
                            <div class="dropzone-filename" title="some_image_file_name.jpg">
                                <span data-dz-name>some_image_file_name.jpg</span>
                                <strong>(<span data-dz-size>340kb</span>)</strong>
                            </div>

                            <div class="dropzone-error" data-dz-errormessage></div>
                        </div>
                        <!--end::File-->

                        <!--begin::Progress-->
                        <div class="dropzone-progress">
                            <div class="progress">
                                <div
                                    class="progress-bar bg-primary"
                                    role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                </div>
                            </div>
                        </div>
                        <!--end::Progress-->

                        <!--begin::Toolbar-->
                        <div class="dropzone-toolbar">
                            <span class="dropzone-start"><i class="bi bi-play-fill fs-3"></i></span>
                            <span class="dropzone-cancel" data-dz-remove style="display: none;"><i class="bi bi-x fs-3"></i></span>
                            <span class="dropzone-delete" data-dz-remove><i class="bi bi-x fs-1"></i></span>
                        </div>
                        <!--end::Toolbar-->
                    </div>
                </div>
                <!--end::Items-->
            </div>
            <!--end::Dropzone-->

            <!--begin::Hint-->
            <span class="form-text text-muted">Max file size is 1MB and max number of files is 5.</span>
            <!--end::Hint-->
        </div>
        <!--end::Col-->
    </div>
    <!--end::Input group-->
</form>
<!--end::Form-->

Queue Auto Upload

DropzoneJS example with manual file attachment and auto upload.
Max file size is 1MB and max number of files is 5.
// set the dropzone container id
var id = "#kt_dropzonejs_example_3";

// set the preview element template
var previewNode = $(id + " .dropzone-item");

previewNode.id = "";
var previewTemplate = previewNode.parent(".dropzone-items").html();
previewNode.remove();

var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
    url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
    parallelUploads: 20,
    maxFilesize: 1, // Max filesize in MB
    previewTemplate: previewTemplate,
    previewsContainer: id + " .dropzone-items", // Define the container to display the previews
    clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
});


myDropzone.on("addedfile", function(file) {
    // Hookup the start button
    $(document).find( id + " .dropzone-item").css("display", "");
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
    $( id + " .progress-bar").css("width", progress + "%");
});

myDropzone.on("sending", function(file) {
    // Show the total progress bar when upload starts
    $( id + " .progress-bar").css("opacity", "1");
});

// Hide the total progress bar when nothing"s uploading anymore
myDropzone.on("complete", function(progress) {
    var thisProgressBar = id + " .dz-complete";

    setTimeout(function(){
        $( thisProgressBar + " .progress-bar, " + thisProgressBar + " .progress").css("opacity", "0");
    }, 300)
});
<!--begin::Form-->
<form class="form" action="#" method="post">
    <!--begin::Input group-->
    <div class="form-group row">
        <!--begin::Label-->
        <label class="col-lg-2 col-form-label text-lg-right">Upload Files:</label>
        <!--end::Label-->

        <!--begin::Col-->
        <div class="col-lg-10">
            <!--begin::Dropzone-->
            <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_example_3">
                <!--begin::Controls-->
                <div class="dropzone-panel mb-lg-0 mb-2">
                    <a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a>
                    <a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a>
                </div>
                <!--end::Controls-->

                <!--begin::Items-->
                <div class="dropzone-items wm-200px">
                    <div class="dropzone-item" style="display:none">
                        <!--begin::File-->
                        <div class="dropzone-file">
                            <div class="dropzone-filename" title="some_image_file_name.jpg">
                                <span data-dz-name>some_image_file_name.jpg</span>
                                <strong>(<span data-dz-size>340kb</span>)</strong>
                            </div>

                            <div class="dropzone-error" data-dz-errormessage></div>
                        </div>
                        <!--end::File-->

                        <!--begin::Progress-->
                        <div class="dropzone-progress">
                            <div class="progress">
                                <div
                                    class="progress-bar bg-primary"
                                    role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                </div>
                            </div>
                        </div>
                        <!--end::Progress-->

                        <!--begin::Toolbar-->
                        <div class="dropzone-toolbar">
                            <span class="dropzone-delete" data-dz-remove><i class="bi bi-x fs-1"></i></span>
                        </div>
                        <!--end::Toolbar-->
                    </div>
                </div>
                <!--end::Items-->
            </div>
            <!--end::Dropzone-->

            <!--begin::Hint-->
            <span class="form-text text-muted">Max file size is 1MB and max number of files is 5.</span>
            <!--end::Hint-->
        </div>
        <!--end::Col-->
    </div>
    <!--end::Input group-->
</form>
<!--end::Form-->

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon