How To Show Upload Progress Percentage In Dropzone.js

I am using dropzone.js in magento to upload files. the progress bar is working fine but i want to show the progress percentage too. Following function is adding style to a span. up

Solution 1:

Assuming you have a span in your progress bar for example like this:

<divclass="progress"><divclass="progress-bar progress-bar-primary"role="progressbar"data-dz-uploadprogress><spanclass="progress-text"></span></div></div>

You should define your uploadprogress function as follows:

uploadprogress: function(file, progress, bytesSent) {
    if (file.previewElement) {
        var progressElement = file.previewElement.querySelector("[data-dz-uploadprogress]");
        progressElement.style.width = progress + "%";
        progressElement.querySelector(".progress-text").textContent = progress + "%";
    }
}

Solution 2:

So many ways to skin a cat... Is there anything wrong with my implementation which seems to work? Although the percentage is in no way rounded "10.12345678%".

myDropzone.on("totaluploadprogress", function (progress) {
  $("#the-progress-div").width(progress + '%');
  $(".the-progress-text").text(progress + '%');
});

I use this in the html:

<divid="the-progress-div"><spanclass="the-progress-text"></span></div>