Answers for "axios file upload progress"

js axios progress

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

fileupload progress bar in axios

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

axios file upload

Add the file to a formData object, and set the Content-Type header to multipart/form-data.

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

File uploading progress with axios

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