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

Solution 1

I found the answer. The name of the event is onUploadProgress and I was using progress

Solution 2

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

Solution 3

This is a very handy library for achieving this without too much coding - https://github.com/rikmms/progress-bar-4-axios/

Solution 4

Before, I make progress bar with onUploadProgress event.

this is my example code as below.

import React from 'react';
import Progress from 'react-progressbar';
import axios from 'axios';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
      uploadFile: null,
    }
  }
  onChangeFile = (event) => {
    this.setState({ uploadFile: event.target.files[0] })
  }

  onUpload = () => {
    const config = {
      onUploadProgress: progressEvent => {
        let { progress } = this.state;
        progress = (progressEvent.loaded / progressEvent.total) * 100;
        this.setState({ progress });
      }
    }

    let formData = new FormData();
    formData.append("file", this.state.uploadFile);
    axios.post('http://your_backend_url/api/v1/upload', formData, config).then(res => {
      if (res.data.status == 200) {
        console.log("done: ", res.data.message);
      }
    }).catch(err => {
      console.log("error: ", err.message);
    })
  }

  render() {
    return (
      <div className="App">
        <Progress completed={this.state.progress} />
        <input type="file" onChange={this.onChangeFile} />
        <button onClick={this.onUpload.bind(this)} >File Upload</button>
      </div>
    )
  }
}

View more solutions

Comments

[djra]

if you have problem that onUploadProgress callback is executed only once check out this answer stackoverflow.com/a/48412965/2805357

[AG_HIHI]

The problem with that library is there doesn't seem to be a function that stops the loading bar