CODEWITHSUNDEEP
reactjsaxiosmultipartform-data
thinuwan
thinuwan

Reputation: 665

ReactJs - Axios - How to get multipart file upload progress

In my ReactJs app I'm using Axios to upload a file as multipart/form-data. Is there a way that i can track the progress of the file uploading.

Upvotes: 3

Views: 7204

Answers (1)

Tu Nguyen
Tu Nguyen

Reputation: 10179

This is the way:

 let data = new FormData();
 data.append('foo', 'bar');
 data.append('file', document.getElementById('file').files[0]);
 let config = {
      onUploadProgress: function(progressEvent) {
              let percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
      }
 };
 axios.put('/upload/server', data, config)
            .then(function (res) {
              output.className = 'container';
              output.innerHTML = res.data;
            })
            .catch(function (err) {
              output.className = 'container text-danger';
              output.innerHTML = err.message;
            });

Hopefully that helps!

Upvotes: 4

Related Questions