how to get onUploadProgress in axios?

Question

I'm little bit confused that how to upload progress event with axios. Actually I am storing huge number files into aws s3. For that, how to get uploaded progress? I need this function onUploadProgress

Currently my Post request is like this:

export function uploadtoCdnAndSaveToDb(data) {
    return dispatch => {
        dispatch(showUnderLoader(true));
        return axios.post('/posttodb', {data:data},

        ).then((response) => {
            console.log(response.data)
        })
    }
}

Answer 1

The Axios repository has a clear example on how to do this: https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

Excerpt from the Website

When you make a request with axios, you can pass in request config. Part of that request config is the function to call when upload progresses.

const config = {
    onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}

When you make the request using axios, you can pass in this config object.

axios.put('/upload/server', data, config)

And this function will be called whenever the upload progress changes.

Just a note on your code

I also noticed that you're not using ES6 to its fullest potential!

Object Declaration

It's got some nice syntax for stuff like this, for example, you have defined an object like: { data: data }, but { data } is sufficient.

It might be worth using a linter with some linting rules, with the most common being the AirBnB style guide

Answer 2

Just wanted to add on to previous answer some people having specific configuration may come onto.

This has to do with the 'problem' that it may turn out that onUploadProgress may be called only once or twice, usually once with the progressEvent.loaded === progressEvent.total

So if the callback is being called at least once, there is nothing wrong with axios or measurement, actually the value is correct. You may arrive at this problem if for example you are doing development and your backend is responsible for uploading data to for example aws s3 bucket

What happens there is that in development normally both frontend and backend are on same machine and there is no real time issue with sending packets (sending data to your dev backend is almost instant even for large files)

The trick and where the time is not measured (because this is backends job) is data transmission to s3, then you have to wait for the promise to resolve but you can't track this progresses unless using web sockets or so.

Most of the time this is not the problem in production env, let's say you're on aws, then most of the time is spent sending data from user to your backend and the backend part (which is ec2) sending data to s3 has really good upload speed it's about 0.3s per 10MB uploaded (for Frankfurt area) so it's probably negligible compared to user -> backend data transmission.

see this link with some benchmarks.

Anyways to test that onUploadProgress is really being called multiple times as you would expect with large files is simply to switch network connection in network tab of developer tools.