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.
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 + "%";
}
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With