user1341315 user1341315 - 2 years ago 430
Node.js Question

xhr uploading progress while using expressjs multer

I am trying to use XHR to track uploading progress, but at my onprogress callback at I only getting Content-Length from response header instead of uploading file size:

xhr.onprogress = (event) => {
console.log('Progress ' + event.loaded + '/' +;

I use Multer to handle file uploading and seems it is not avaible to handle file uploading by default:

So I tried to handle uploading with progress-stream:

var p = progress({ time: 1 });

p.on('progress', function() {

But it works same way, I only get onle "Progress..." at log and at XHR onprogress I have only Content-Length value instead of file size value. Help please, I have no idea how to fix it!

Answer Source

You don't need get the progress in the backend if you want to show the progress, you only need to know what you've sent from your frontend to backend so you can calculate the upload progress.

In your frontend .js or .html, try something like this:

var formData = new FormData();
var file = document.getElementById('myFile').files[0];
formData.append('myFile', file);
var xhr = new XMLHttpRequest();

// your url upload'post', '/urluploadhere', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percentage = (e.loaded / * 100;
    console.log(percentage + "%");

xhr.onerror = function(e) {
xhr.onload = function() {


In the backend you only need a simple endpoint like this:'/urluploadhere', function(req, res) {
  if(req.files.myFile) {
    console.log('hey, Im a file and Im here!!');
  } else {
    console.log('ooppss, may be you are running the IE 6 :(');

Multer is also necessary and remember, xhr only works in modern browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download