Tracking file upload progress using axios

upload.js

upload(files) {
  const config = {
    onUploadProgress: function(progressEvent) {
      var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      console.log(percentCompleted)
    }
  }

  let data = new FormData()
  data.append('file', files[0])

  axios.put('/endpoint/url', data, config)
    .then(res => console.log(res))
    .catch(err => console.log(err))
}

Nice, is it bad to do a setState with the log?

thx , usefull

I have added onDownloadProgress and onUploadProgress, with Rails and VueAxios.
onDownloadProgress is calling normaly, but onUploadProgress is not calling anyway.
I can not find the reason for this one.
Any suggestion for this ?

You are champ.

Thanks

Thanks

Thank you ♥

Very useful,have a wonderful day!

Thanks you 🚀

Thanks a bunch! Clean & nice code

Спасибо!

With some improvements:

const onUploadProgress = event => {
    const percentCompleted = Math.round((event.loaded * 100) / event.total);
    console.log('onUploadProgress', percentCompleted);
};

const upload = async files => {
    const data = new FormData();
    
    for(const [index, file] of files.entries()){
        data.append(index, file); // append all files
    }

    try {

        const result = await axios.put('/endpoint/url', data, {onUploadProgress});

        console.log('result is', result); // result is server's response

    } catch(error){
        console.error(error);
    } finally {
        console.log('Upload complete');
    }
}

Very thanks all to be so kind to share a great code!!

@virolea, that's still works and it's simply cool! Thanks a lot!
@futuster, nice touch!

Verry nice! Thanks

Thanks a lot!!

Thanks!

Useful, thanks!

I when try take request.upload.addEventListener in not a function

thanks bro

wow, this code works exactly as written by you. thanks man, nice code

Thank you!

This is code and I thank.

I am not a bot.

simple, efficient & works... thanks a lot

Thanks a lot!

Thanks.

you lou bro :)

Really helpful, thanks

Nice. thanks!

Thank you bro

Hi, but this is giving me 401 unauthorized error when i call my API, Why is that?