xhr uploading progress while using expressjs multer xhr uploading progress while using expressjs multer express express

xhr uploading progress while using expressjs multer


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 uploadxhr.open('post', '/urluploadhere', true);xhr.upload.onprogress = function(e) {  if (e.lengthComputable) {    var percentage = (e.loaded / e.total) * 100;    console.log(percentage + "%");  }};xhr.onerror = function(e) {  console.log('Error');  console.log(e);};xhr.onload = function() {  console.log(this.statusText);};xhr.send(formData);

In the backend you only need a simple endpoint like this:

app.post('/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 :(');  }  res.end();});

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