dropzone

Dropzone is a JavaScript library used to create drag-and-drop file upload forms with ease. This section covers the steps required to include Dropzone in your project:

Install from Yarn

To install Dropzone, run the following command in the root directory of your project:

yarn add dropzone --save

To use Dropzone in your project, you need to include its stylesheet and JavaScript files in your HTML:

<link rel="stylesheet" href="assets/libs/dropzone/dropzone.css"><link/>

<script src="assets/libs/dropzone/dropzone-min.js"><script/>

Below is an example of the HTML code for creating a Dropzone area where users can drag-and-drop or click to upload files:

    

        
    
    

        

            
        
        
Drop files here or click to upload.
    

Here is the JavaScript code that initializes the Dropzone instance. This allows you to configure the file upload behavior, including accepted file types, maximum file size, and success/error handling:

var myDropzoneMain = document.getElementById('product-editor');
if (myDropzoneMain) {
    new Dropzone(myDropzoneMain, {
        url: 'https://httpbin.org/post', // Placeholder URL to handle file uploads
        method: "post",
        previewTemplate: document.querySelector("#dropzone-preview-list").innerHTML,
        previewsContainer: "#dropzone-preview",
        paramName: "file",
        maxFilesize: 2, // Max filesize in MB
        acceptedFiles: "image/*,application/pdf", // Accepted file types
        dictDefaultMessage: "Drop files here or click to upload.",
        dictInvalidFileType: "You can't upload files of this type.",
        dictFileTooBig: "File is too big (MB). Max filesize: MB",
        hiddenInput: true,
        init: function () {
            // Success event handler
            this.on("success", function (file, response) {
                var errorContainer = file.previewElement.querySelector(".dz-error-container");
                var progressBar = file.previewElement.querySelector(".dz-progress");

                if (errorContainer) {
                    errorContainer.style.display = "none";
                }

                if (progressBar) {
                    progressBar.style.display = "block";
                }
            });

            // Error event handler
            this.on("error", function (file, errorMessage) {
                var errorContainer = file.previewElement.querySelector(".dz-error-container");
                var progressBar = file.previewElement.querySelector(".dz-progress");

                if (errorContainer) {
                    errorContainer.style.display = "block";
                    errorContainer.querySelector("[data-dz-errormessage]").textContent = errorMessage;
                }

                if (progressBar) {
                    progressBar.style.display = "none";
                }
            });

            // Upload progress event handler
            this.on("uploadprogress", function (file, progress) {
                var progressElement = file.previewElement.querySelector("[data-dz-uploadprogress]");
                if (progressElement) {
                    progressElement.style.width = progress + "%";
                    progressElement.setAttribute("aria-valuenow", progress);
                }
            });
        }
    });
}

The above JavaScript code does the following:

• Initializes Dropzone with the HTML element having the id `product-editor`.
• Specifies the URL to which the files are uploaded.
• Defines various options such as the accepted file types (images and PDFs), file size limit (2 MB), and custom messages for errors and success.
• Handles success, error, and progress events to display feedback to the user during the upload process.