Progress Bar with axios

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

I am new to the world of javascript.

jplhomer

8 years ago

Best Answer

Level 6

It looks like axios expects a property/method named onUploadProgress instead of progress. Maybe you could try switching that out?

Debugging JS is always kind of tricky. I'd start by adding a console.log() statement outside of your if statement inside the method to see if progress is even executing. Good luck!

1 like

Please or to participate in this conversation.