Axios: Upload progress for multiple file uploads

Question

Following https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html I've set up a file upload with progress bar.

However, I have <input type="file" multiple>, so the upload is inside a loop like this:

for (var i=0; i<files.length; i++)
{
    var config = {
        onUploadProgress: function(progressEvent) {
            var what = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
        }
    };
    axios.post(url, data, config)
        .then(function (response) {
    });                            
}

The question is: How can I assign the upload progress (see var what) to the corresponding file?

Everything I've tried didn't work:

The callback function onUploadProgress apparently doesn't take any second argument: https://github.com/mzabriskie/axios#request-config

The injected progressEvent object doesn't contain any information about the uploaded file. Example:

progress { target: XMLHttpRequestUpload, isTrusted: true, lengthComputable: true, loaded: 181914, total: 181914, currentTarget: XMLHttpRequestUpload, eventPhase: 2, bubbles: false, cancelable: false, defaultPrevented: false, composed: false }

The looping variable i is accessible in principle - however, it's always at the last position (since the loop has finished when onUploadProgress gets called during the upload)
I couldn't figure out a way to access axios' data from inside onUploadProgress

this refers to:

XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, ontimeout: null, onloadend: null }

Any other ideas?

Am I missing something here? You are inside a for loop and uploading one file at a time. That means that in every progressEvent you are already referring to the corresponding file. Could you add a listener to the progressEvent and print out its "total" value? I think you are already looking at the corresponding files. As a side note take the config out of the for loop you dont need to re-define it per file. — Samuel Bergström, Jul 25 '17 at 18:32
Yeah, thanks, I already thought that the answer might be that there is no answer ;-) I can only try this in a couple of days - I'll report then... — Thomas Landauer, Jul 26 '17 at 16:31
I'm also wondering how to achieve this. With jQuery, I've been using the "xhrFields" parameter, but I'm not sure if Axios has anything similar. — dvyio, Aug 08 '17 at 23:52

score 10 · Answer 1 · answered Sep 15 '17 at 04:18

You can create a function that return another decorated function with some Id as parameter.

Example:

const myUploadProgress = (myFileId) => (progress) => {
  let percentage = Math.floor((progress.loaded * 100) / progress.total)
  console.log(myFileId)
  console.log(percentage)
}

for (var i=0; i<files.length; i++) {
  var config = {
    onUploadProgress: myUploadProgress(files[i].id)
  };

  axios.post(url, data, config).then(function (response) {});                            
}

If you don't have ES6 you can do:

function myUploadProgress(myFileId) {
  return function(progress) {
    ...
  }
}

(I'm using a similar code on my project and it works like a charm)

score 0 · Answer 2 · answered Aug 02 '17 at 15:50

This is a variable scoping issue. In JavaScript var declares a variable in a function scope. There are a lot of potential solution, depending on which version of ES your target browser supports. I'll use the same function to demonstrate:

setTimeout(function(){ console.log(i); }, i * 100);

Using var this will print out '5' 5 times. We want it to print out 0 1 2 3 4.

If you have Array#forEach, you can use that since the closure creates a new function scope

[0, 1, 2, 3, 4].forEach(function(i) { 
    setTimeout(function(){ console.log(i); }, i * 100);
});

If you have access to let, let and const uses block scoping instead (ie. the variable is scoped to the nearest set of { ... }).

for (let i = 0; i < 5; i++) {
    setTimeout(function(){ console.log(i); }), i * 100);
}

If you don't have access to either of those, you can use an IIFE. It's really ugly but it gets the job done.

for (var i = 0; i < 5; i++){ 
    (function() {
        var newI = i;
        setTimeout(function(){ console.log(newI); }, i * 100); 
    })();
}

Axios: Upload progress for multiple file uploads

2 Answers2

Linked