Axios: Upload progress for multiple file uploads

Viewed 9541

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?

2 Answers
Related