I have to display the upload status of the file using a Progress Bar. I am using axios
to make http requests. I followed the example from their github page https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html
My code looks like this:
this.store().then(() => { var form = new FormData(); form.append('video', this.file); form.append('uid', this.uid); axios.post('/upload', form, { progress: (progressEvent) => { if (progressEvent.lengthComputable) { console.log(progressEvent.loaded + ' ' + progressEvent.total); this.updateProgressBarValue(progressEvent); } } }) });
However, it is not executing the console.log(progressEvent.loaded + ' ' + progressEvent.total);
at all nor is it calling this.updateProgressBarValue(progressEvent);
How can I solve this??
onUploadProgress: function(progressEvent) { var percentCompleted = Math. round( (progressEvent. loaded * 100) / progressEvent. total ); } }; onUploadProgress is a callback for progress event.
Instead of making multiple HTTP requests individually, the axios. all method allows us to make multiple HTTP requests to our endpoints altogether. The axios. all function accepts an iterable object that must be a promise, such as a JavaScript array, and it returns an array of responses.
I think the problem is with the "progress" event itself, as you can read in Axios configuration itself progress is not supported. instead you should listen to onUploadProgress or onDownloadProgress
Another issue is getting the totalLength which i tried doing the following way: look if lengthComputable, if not try and get the length from the header, if not try and get the decompressed content length (as last resort) then you should be able to do whatever you want with the value.
This is not a fool proof implementation! it will fail whenever the totalLength is not available.
In order to make it a bit more solid you could implement "fake" progress using setInterval to increment the progress manually every second. Once the promise is resolved, set the progress manually to 100%. if you implement it using CSS transitions you should get a smooth solution even if the progress is not always "correct"
I made a similar loader (GitHub link) if you need more code.
onUploadProgress: (progressEvent) => { const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length'); console.log("onUploadProgress", totalLength); if (totalLength !== null) { this.updateProgressBarValue(Math.round( (progressEvent.loaded * 100) / totalLength )); } });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With