request progress?

[aprilmintacpineda]

I have seen the issue at #82 if for example I have these codes

axios.post('./api/test', {
	name: 'fred'
})
.then(response => {
	console.log(response.data);
});

Is there any way to find out the current progress of the request? I need it for a customized loading bar. It would be great if I could get it on percentage or if not I could simply get a value that I can use to find out how much progress has pass.

[aprilmintacpineda]

I figured it out. So I can also use the onUploadProgress.

[alofeoluwafemi]

@four-eyes-04-04 How did you use the method to Show the progress, an example please!

[aprilmintacpineda]

@slim12kg

let config = {
  onUploadProgress: progressEvent => {
    let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
    // do whatever you like with the percentage complete
    // maybe dispatch an action that will update a progress bar or something
  }
}

axios.post('/path/to/post/', data, config)
        .then(response => console.log(response));

Depending on the way you coded your project it may change, if my code confuses you, please don't hesitate to ask me more and I will gladly help as soon as I read your response. You're welcome.

:-)

[alofeoluwafemi]

@four-eyes-04-04 Thanks for the help!

[PierBover]

Any way to determine the download progress of a request?

[jrtnq514]

@PierBover Use onDownloadProgress instead of onUploadProgress. Found it in the Request Config section here https://github.com/mzabriskie/axios.

Hope this helps!

UPDATE: Found this issue #928

[jayzyaj]

How can I track the complete progress from 0 - 100%? I always got 0 or Nan and 100

[jcmidia]

Hi all! Is it possible to use onDownloadProgress with the axios.all function?

[ghost]

@jcmidia download is handled by the browser, right?

[aprilmintacpineda]

Hey guys, you can use the intercetor if you want to handle this in a global form. Like so:

import Axios from 'axios';

function onUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

function handleUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

Axios.interceptors.request.use(config => {
  ...config,
  onUploadProgress,
  onDownloadProgress
});

Add those codes on your entry file, then on your other files (views or components):

aFile.js

import Axios from 'axios';

function makeRequest () {
  axios.get('/to/path')
  .then(({ data })=> {
    console.log(data);
  });
}

anotherFile.js

import Axios from 'axios';

function makeRequest () {
  axios.post('/to/path', data, yourConfigIfAny)
  .then(({ data }) => {
    console.log(data);
  });
}

get use the onDownloadProgress, other requests use the onUploadProgress. (Please mention me for any corrections)

There's a trade off to this. If you sent multiple requests it would be up to you to maybe sum their total and their loaded to get the total percentage of the progress.

You can modify the code above a little bit to be more flexible like so:

import Axios from 'axios';

function onUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

function handleUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

Axios.interceptors.request.use(config => {
  ...config,
  onUploadProgress: config.onUploadProgress || onUploadProgress,
  onDownloadProgress: config.onDownloadProgress || onDownloadProgress
});

Now you can provide a custom onUploadProgress and onDownloadProgress handler, it will adjust accordingly.

import Axios from 'axios';

function customOnUploadProgress (ev) {
  console.log('customOnUploadProgress', ev);
}

function makeRequest () {
  axios.post('/to/path', data, {
    onUploadProgress: customOnUploadProgress
  })
  .then(({ data }) => {
    console.log(data);
  });
}

[LorrainInfinity]

Hi guys. I followed what you told us, but sadly, just like @jayzyaj , I'm always getting "100" as a result, both on upload/download. Do you know where that could come from? My code is very similar to @aprilmintacpineda , an interceptor, and then I just copied/pasted the 2 functions.

[seemlessly]

Only 100% can be fired in case your upload files are too small, or download/upload speed is too fast. Try to upload 10mb file maybe.
Also same issue for me was solved with

upload: data => axios.post( "api/", data, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (progressEvent) => { const percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total); // dispatch }, }, ), };

configuring axios requests with object was an issue, as axios({method: "", config: {}, data: data})

[stepanushariara]

Hi, how to use this code ?
Thank you

[rishabhkumar003]

Hi, I need to show the download progress.... I have my logic written in JSP file... ho do I write it in react?

PFB the code:

        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                //Download progress
                xhr.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        dataloaded = evt.loaded;
                    }
                }, false);
                return xhr;
            },

            type: 'GET',
            url: urlForDownload,
            cache: false,
            beforeSend: function() {
                startTime = (new Date()).getTime();
				 start = startTime;
            },
            timeout: timeOutValue,
            complete: function() {
                end = new Date().getTime();
				var totalTime = end - startTime;
				
                arrTime.push((totalTime));
                arrData.push((dataloaded));
                processing += 12;
                progressBarInc(processing);
                d3.resolve("asda");

            }
        });