madprabh's avatar

File Upload using axios + vue - progress percentage doesn't work

Hey Folks,

I am struggling to get the upload percentage to work. For some reason the percentageComplete always is set to 100. And I always get the same number for "progressEvent.loaded" "progressEvent.total". Does anyone have any clues where I might be going wrong?

I have pasted my code below.

uploadFile(e)
    {
      console.log(e)
      let formData = new FormData();
                 formData.append("attachments", e);
                  axios.post('/fileuploads', formData, {
                          headers: {
                      'Content-Type': 'multipart/form-data'
                  },
                   onUploadProgress: (progressEvent) => {
                    if (progressEvent.lengthComputable) {
                       this.percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                       console.log(this.percentCompleted)
                      }
                    }
                      })
                      .then(response=>{
                          console.log(response)
                          
                      }, (error) => {
                          
                         
                  })
    },

0 likes
0 replies

Please or to participate in this conversation.