Axios onUploadProgress only fires once on my machine

Question

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.

Did you try with a big enough file? Maybe the data doesn't get chunked the same way locally and instantly completes the upload? — Thomas Hennes, Oct 17 '17 at 00:02
Yeah I believe this was the issue. Jpegs are too small and it was completing instantly. My confusion comes from that jfiddle example because in that example the progress is gradual and not instant even with jpegs. — mijota, Oct 18 '17 at 15:04

score 9 · Accepted Answer · answered Jan 22 '20 at 07:21

9

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:

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

answered Jan 22 '20 at 07:21

Tejas

163
2
8

is there a way to enforce the split even on speed netwrok? – irzhy Oct 21 '20 at 13:47

score -3 · Answer 2 · answered Apr 04 '18 at 09:39

-3

Because the new version changed.

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

        });
    }

answered Apr 04 '18 at 09:39

Tuan Nguyen

2,542
19
29

There is no method called progress: () => {} – Marcus Christiansen Feb 22 '19 at 10:10
see my screenshot above, that shows you the source code of progress method – Tuan Nguyen Feb 22 '19 at 10:51
onUploadProgress: (progressEvent) => {} is what works. – Thadeus Ajayi Apr 22 '19 at 21:21
I tested this and is not working, just use ```onUploadProgress``` – Pooria Honarmand Mar 23 '20 at 23:13
1

In case anyone is confused by this, the explanation is that the **old** way of doing it was via the `progress` method. Now it's `onUploadProgress`. Most people will want the latter unless they are using a very, very old version of axios. See https://stackoverflow.com/a/55330472/1994235 for more details. – three_pineapples Dec 02 '21 at 07:25

Axios onUploadProgress only fires once on my machine

2 Answers2

Linked