Multer: Multiple progress bars

[Paul-Morris]

Is there a way Multer can do multiple progress bars for multiple images? I have a single progress bar working that shows a total of all the files currently being uploaded.

Here's the front end code I'm using that uses FormData and XMLHttpRequest() Do you think this is the right approach or should I try to find some other middleware to help? I'm still at a beginner javascript level and may have bitten off more than I can chew here!

$("#imagesForm").submit(function (clicked) {
console.log("clicked multi upload");
clicked.preventDefault();
var formData = new FormData(imagesForm);
$.ajax({
url: '/images-form',
type: 'POST',
data: formData,
cache: false,
processData: false,
contentType: false,
success: function (r1) {
var xhr = new XMLHttpRequest();
xhr.open('post', '/images-form', true);
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
var percentage = (e.loaded / e.total) * 100;
$('#multi-image-progress.progress div').css('width', percentage.toFixed(0) + '%');
$('#multi-image-progress.progress div').html(percentage.toFixed(0) + '%');
console.log(percentage + "%");
}
};
xhr.onerror = function (e) {
console.log('Error');
console.log(e);
};
xhr.onload = function () {
console.log(this.statusText);
};
xhr.send(formData);
$("#imagesForm")[0].reset();
$("#imagesResultDiv").html("Images uploaded!", r1);
console.log("Images uploaded", r1);
},
error: function (e3) {
$("#imagesResultDiv").html("Error!", e3);
console.log("ERROR Firefox: ", e3);
}
});
});

[ghinks]

hello @Paul-Morris someone will be along to help you with your question.

[jonchurch]

Hey there, short answer is no. Multer does not provide progress updates specifically. That's a browser API you're dealing with and outside the scope of multer.

There's some resources on the internet about multiple progress bars for uploads, I think one approach would be to make multiple XHR requests so each one deals with one file.

I'm going to close this as it's not something Multer specific 👍

[Paul-Morris]

Once I learned a bit more the past week that's exactly the path I went down. A new XHR request for each image. The difference between the front end JS and the Multer end was a bit fuzzy to me but now I realize it's entirely front end code