How to show upload progress percentage in dropzone.js

Question

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.

uploadprogress: function(a, b) {
                var c, d, e, f, g;
                if (a.previewElement) {
                    for (f = a.previewElement.querySelectorAll("[data-dz-uploadprogress]"), g = [], d = 0, e = f.length; e > d; d++) c = f[d], g.push("PROGRESS" === c.nodeName ? c.value = b : c.style.width = "" + b + "%");
                    return g
                }
            },

which add the style="width:xx%" in the following html.

I also want to show the % result which g return in above code in span as text so that the user can see the numbers too.

Connivance

Answer 1

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

<div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" data-dz-uploadprogress>
        <span class="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 + "%";
    }
}

Sacker

This works well. I want to add to this solution solution so whoever is reading this may want to know it goes in the options, so to add to the options do this: Dropzone.options.dropzoneIDHere = { uploadprogress: function(file, progress, bytesSent) { } }; – Crucifix

What is a.previewElement in this case? It's not defined in your code – Gerardgerardo

@Ben, Ideally it should be file.previewElement. Even after that if you face any error of querySelector being null, use following line instead of querySelector line (or equivalent js line, if no jquery) $(".progress-text").text(progress + "%") – Ganister

It should be if (file.previewElement) { – Galway

Answer 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:

<div id="the-progress-div">
  <span class="the-progress-text"></span>
</div>

Daryldaryle

You may want to use progress.toFixed(2) for the percentages to be rounded to 2 decimals. – Juna

If you choose to use this,the function now takes three args, (file, progress, bytesSent) – Fasta