Axios: upload level for multiple file uploads
After https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html I installed a file upload with a progress bar.
However, I have <input type="file" multiple>
, so the download is inside the loop:
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 arises: how can I assign the boot process (see var what
) to the appropriate file?
Everything I've tried doesn't work:
-
The callback function
onUploadProgress
doesn't seem to take any second argument: https://github.com/mzabriskie/axios#request-config -
The injection object
progressEvent
does not contain information about the loaded 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 available in principle - however it is always in the last position (since the loop is completed whenonUploadProgress
called at boot time) -
I couldn't find a way to access axios
data
from the insideonUploadProgress
-
this
refers to:XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, ontimeout: null, onloadend: null }
Any other ideas?
source to share
You can create a function that returns another decorated function with some Id parameter like.
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 am using similar code in my project and works like a charm)
source to share
This is a variable problem. JavaScript var
declares a variable in the function scope. There are many potential solutions, depending on the ES version your target browser supports. I'll use the same function to demonstrate:
setTimeout(function(){ console.log(i); }, i * 100);
By using var
, you will select "5" 5 times. We want to print it 0 1 2 3 4
.
If you have Array#forEach
, you can use it as 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 the dimension scope instead (i.e. the variable is bound to the nearest set { ... }
).
for (let i = 0; i < 5; i++) {
setTimeout(function(){ console.log(i); }), i * 100);
}
If you don't have access to any of them, you can use 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);
})();
}
source to share