CODEWITHSUNDEEP
javascriptreactjsexpressaxios
mijota
mijota

Reputation: 101

Axios onUploadProgress only fires once on my machine

If I use this fiddle https://jsfiddle.net/v70kou59/1/ everything works as expected

(function () {
    var output = document.getElementById('output');
    document.getElementById('upload').onclick = function () {
      var data = new FormData();
      data.append('foo', 'bar');
      data.append('file', document.getElementById('file').files[0]);
      var config = {
        onUploadProgress: function(progressEvent) {
          var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
          console.log(percentCompleted)
        }
      };
      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;
        });
    };
  })();

But if I download the axios examples repo and install the necessary dependencies the callback function, onUploadProgress no longer works as expected. It only fires onUploadProgress once with "100". https://github.com/axios/axios/tree/master/examples

Could this be my version of node? It seems like it must be my machine.

Upvotes: 9

Views: 7583

Answers (2)

Tejas
Tejas

Reputation: 183

I've had exact issue. One of the reason(it was the case with me) could be, your network is too fast to trigger the progressEvent multiple times.

To simulate this, slow down your network on Network tab of your Browser.

Slow 3G setting worked for me on Google Chrome/New Edge(dev release) browser.

Refer the image:

enter image description here

PS: I know this is too late to answer this. But others might find it helpful when they land here.

Upvotes: 10

Tuan Nguyen
Tuan Nguyen

Reputation: 2607

Because the new version changed.

enter image description here

So you have to call progress instead of onUploadProgress

 static uploadImageFile(authId, userinfo, file, callback) {
        let url = AppConfig.domain + '/api/CoreUploads/uploadImg';
        let formData = new FormData();
        formData.append('realm', userinfo.realm);
        formData.append('fileurl', `users/${userinfo.id}/`);
        formData.append('cropData', "");
        formData.append('autoid', true);
        formData.append('image', file);

        return axios.post(url, formData, {
            timeout: 1000000,
            withCredentials: true,
            headers: {
                'Authorization': authId,
                'Content-type': 'multipart/form-data'
            },
            progress: function (progressEvent) {
                let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                callback(percentCompleted);
            }
        }).catch(e => {
            console.log(e);

        });
    }

Upvotes: -3

Related Questions