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

Franklyn

See my comment in this case. call progress instead of onUploadProgress https://mcmap.net/q/247465/-axios-onuploadprogress-only-fires-once-on-my-machine – Unstriped

Answer 1

The Axios repository has a clear example on how to do this: https://github.com/axios/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

Palpate

Thx chris I will follow yours rules yes I am new to es6.And Your code is printing at the end of total bytes uploaded but i want the changing number of uploading progress – Franklyn

How big is the file that you're uploading? – Palpate

5mb to 1mb @chris – Franklyn

Also how can I cancel the upload process in between? – Tawanda

If you are dealing with multiple lines, with ES6 you can just do onUploadProgress(progressEvent) { ... } – Skiffle

In my case i have to include token after data. In this scenario how can i use config? – Fleece

tracking upload progress seems to be only supported for the browser. do you happen to have any suggestions for tracking upload/download progress on the server? thanks. – Collenecollet

Hi @christoper, How we can pass auth header along with data and config in this request? I have added auth header in other user request but for this type request i am not able to pass any auth header . Please suggest me something. – Coahuila

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.

Romaromagna

even more protip: use that Custom: Add... to put in 1mbs, 8mbs, etc... – Cistercian

To see multiple upload progress events in development, create a custom Network Throttling Profile simulating uploading at 50KB/s: Custom > Add... > Add custom profile... > Upload > 500. Note the throttling profile uses kbit/s. So 500 kilobits is actually 62.5 kilobytes (500/8). – Hyacinthus

So if I have a very heavy work on the BE side after the file is uploaded, then I can not use this hook to track the progress right? This hook is only to know if the file is fully uploaded to the BE, and the other task is not counted, am i right? – Riffe

Answer 3

await axios.put(sasUrl, file, {
    headers: {
        'x-ms-blob-type': 'BlockBlob',
        'Content-Type': file.type
    },
    onUploadProgress: (event) => {
        if (event.lengthComputable) {
            progress.value = Math.round((event.loaded / event.total) * 100);
        }
    }
});

Crenelate