dropzone.jsdropzone

How Can I Show Loader In Dropzone With Percentage in Progress?

I am using dropzonejs in my code but i dont know how to place loader image in dropzone before file is uploaded and after upload want to hide loader.I don't know how to do that,Can anybody please help me out to solve my problem?

Solution

  • U can listen to totaluploadprogress event, its callback function function(progress) { ... } has an argument progress which holds current upload progress.

    Knowing that u should be able to make a loader with CSS or a progress bar like in my case:

    let myDropzone = Dropzone("#my-element", { /* options */ });
myDropzone.on("totaluploadprogress", function (progress) {
   var elProgress = document.getElementById("#progress-bar");  // my progress bar

   if (elProgress === undefined || elProgress === null) return;

   elProgress.style.width = progress + "%";  // changing progress bar's length based on progress value
});