[axios] onUploadProgress - progress bar

Search: axios request how to set progress bar

Dom

<progress id="file" max="100" value="80"> 80% </progress>

: The Progress Indicator element - HTML: HyperText Markup Language | MDN

handle progress bar

// handle progress bar function

function handleUploadProgressBar(progress) {
    document.querySelector('#file').value = progress;
      document.querySelector('#file').innerHTML = progress;
}

// request
axios.put('/update', formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
  onUploadProgress : (progressEvent) => {
    const progress = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
    // Update state here
    handleUploadProgressBar(progress);
  },
});

Request Config

// `onUploadProgress` allows handling of progress events for uploads
// browser only
onUploadProgress: function (progressEvent) {
  // Do whatever you want with the native progress event
},

// `onDownloadProgress` allows handling of progress events for downloads
// browser only
onDownloadProgress: function (progressEvent) {
  // Do whatever you want with the native progress event
},