OnUploadProgress is only called once

Question

I'm trying to track the progress of data upload on my react native app. I use the plugin apiSauce to call my server running locally (node server with baseURL : 192.xxx.x.xx":9000/).

On the front part I called my api using 'apisauce' with the code below :

const apiClient = create({
  baseURL: "http://192.xxx.x.xxx:9000/api",
});

return apiClient.post(endpoint, myData, {
    onUploadProgress: (progress) => {
      console.log(progress.loaded / progress.total);
    },
  });

From that I except several logs in my console like : 0.1 , 0.2,0.3, ... , 0.9, 1.0 but what I got now is only one log : 1.

I dont understand why onUploadProgress is only fired once, I tried to throttle the network on the android virtual device that I'm using for my test, also running the server with baseURL : 127.0.0.1 doesn't seem to fix my issue.

Answer 1

I had the same problem and the code was just fine (similar to the one you posted LePetitPrince), the problem was the speed when doing this locally (it instantly uploaded and therefore only 1 progress report was made).

To actually see the progress on the console I went and searched for a 10MB image file (this one should work: https://commons.wikimedia.org/wiki/File:Pizigani_1367_Chart_10MB.jpg) and changed the network to Slow 3G on DevTools and then I got to see the several calls with progress being made.

You can refer to this github issue for more details.

Answer 2

After spending quite some time testing the suggested answer above with throttled internet speed and the 10MB image, I still faced the same issue with the returned value 1 when console.log(progress.loaded / progress.total);

I gave it a few more tries with other bigger images with a file size over 25mb. No luck either. So I went extreme and finally figured out the issue stayed the same - the file size isn't big enough for the algorithm to log any previous values before it's completely uploaded.

So the way I did it was to use React Native Debugger to throttle my Internet Speed down to 3G as other people did.

After that, you will need to refresh your app to get that updated network speed up and running on your simulator.

The final step is to use an extremely large image for the function. I've found some images with a size over 200MB on this site.

To save your time, I've got one URL here for you: https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73726/world.topo.bathy.200406.3x21600x10800.png

Simply copy and paste it to replace your existing uri and you will be able to see the multiple ratios logged as expected.

Just note that this is simply for you to see the code functions properly. You will need to edit your uri back to your correct uploaded one.