javascriptreactjsreduxaxios

how to get onUploadProgress in axios?


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

Solution

  • 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