javascript - Progress Bar with axios

Question

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??

Answer 1

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 ));
                }
            });