onUploadProgress will be 100% before uploading process finished

[milad145]

Describe the issue

hey every body.
in the first, sorry for my poor english language.
i wrote some code for uploading some images and data together by formdata format in react-native.
and i use node.js in backend side and every thing is ok. i can upload images.
but problem has occurred when i want use onUploadProgress. then loaded parameter will be 100% immediately but the upload process take some minutes after that.
just in record when i use ajax in js code it's will be perfect so the problem is not from backend side. and it occurred just in react-native and the images select and crop by react-native-image-crop-picker.

here is my code:

Example Code

axios.post(api_url, formData, {
    onUploadProgress: progressEvent => {
        let {loaded, total} = progressEvent;
        console.log((loaded / total) * 100)
    },
    headers: {
        'Authorization: Bearer <authorization token>',
        'Content-Type': 'multipart/form-data'
    }
});

Expected behavior, if applicable

Environment

• Axios Version 0.21.0
• Node.js Version v14.15.1
• OS: ubuntu 18.04
• Additional Library Versions React Native 0.63.0

Additional context/Screenshots

[UXandre]

Facing the same issue today. I found on google that some people said it happens because the file is uploaded very fast when you run your server on localhost. So you need to slow down your network to Slow 3G. I tried that with no luck, either.

Would appreciate if anybody could give a pointer! Thank you!

[shannhastings]

I see the same issue. The onUploadProgress will ramp up to 100 pretty quick on a large file, but watching the network tab the file is still sending for a long time after progress has said it was 100. Then finally the promise will return. This does not have anything to do with localhost. Just upload a large file to say S3 and you will see, the onUploadProgress calls will finish WAY before the actual promise, i.e. the data, has been transmitted.

[Alirez14]

same here on react native please fix the issue :/

[snaptsoft]

Unfortunately also still seeing this issue using Expo 41.0 and React Native.

[weijiatan456]

Same here. It will be great if anyone can post a work around on this issue.

[SiSa68]

Same!
It takes longer time to upload also (comparing to postman)

[hraschan]

Got the same issue! Any ideas?

[johnbonds]

Running into the same problem. The promise returns when the file finished uploading but the progress callbacks are happening almost instantly. Using React Native.

[johnbonds]

I found this closed issue on react-native. Not sure if it's related or if this issue simply cropped back up:

facebook/react-native#11853

[ziaadini]

i think it's not related to axios and upload, it's because your api server doing some thing else (for example resize or ...) and it's delayed.

[milad145]

i think it's not related to axios and upload, it's because your api server doing some thing else (for example resize or ...) and it's delayed.

i test my backend api with ajax in the web side with the same api and it work fine. problem occurred when i use it in react-native

[snaptsoft]

The API we are hitting is a commercially available one for document management. We also hit is using Axios in a react PWA without any issues. I believe the issue lay in the combination of RN and Axios. On Mar 28, 2022, at 02:51, Milad Aslani Somarin ***@***.******@***.***>> wrote: i think it's not related to axios and upload, it's because your api server doing some thing else (for example resize or ...) and it's delayed. i test my backend api with ajax in the web side with the same api and it work fine. problem occurred when i use it in react-native — Reply to this email directly, view it on GitHub<#3469 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AN6IKZUBGFTXVS25XEHU253VCF6KNANCNFSM4UU4WZ7Q>. You are receiving this because you commented.Message ID: ***@***.***>

[johnbonds]

I'm pretty sure this is a RN issue specifically in Java. If I get some time I'm going to see about debugging it in the RN source code.

[lnzhaotian]

So this is still not solved yet? I'm also stuck with this problem for quite a while now.

[jakehasler]

I'm seeing this in RN on iOS, not just android. Just FYI.

[MussadiqAli]

I am facing the same issue. Does anyone know the answer?
I have tried with both XMLHttpRequest and Axios, and both have the same problem, first, they show progress up to 100% in a second and then start uploading the file.
I also have tried with the simple web page to upload files, where both methods work successfully the problem only in React Native

[MussadiqAli]

I'm pretty sure this is a RN issue specifically in Java. If I get some time I'm going to see about debugging it in the RN source code.

do you find any solution?

[Yuki-TU]

I also have tried with the simple web page to upload files, where both methods work successfully the problem only in React Native.

In my environment, I get the same problem with react, typescript. Is it the same for others?

[stharvey]

I am seeing this exact issue too. At first I was using XMLHttpRequest and was getting this issue so I changed over to using axios and problem is exactly the same.

The actual upload works correctly however the onUploadProgress callback is gets up to 100% within the first couple of seconds even though the actual file upload takes ~1-2 minutes or more. The axios.post promise isn't resolved until the file upload is actually successful.

[stharvey]

Hello again, I've figured this out. Just in case this helps someone else:

The issue was occurring when running a development bundle on a metro server - axios/xhr was reporting on the status of the upload of the file to the metro proxy rather than to the final destination on the net.

When I created an apk build everything worked correctly.

[milad145]

Hello again, I've figured this out. Just in case this helps someone else:

The issue was occurring when running a development bundle on a metro server - axios/xhr was reporting on the status of the upload of the file to the metro proxy rather than to the final destination on the net.

When I created an apk build everything worked correctly.

sorry, I can't understand. do you mean that if I build a release apk it gonna be OK?

[stharvey]

Hello @milad145 - yes, in my case this only occurs when running it via Metro Bundler - i.e. a debug or development build. If you are able to edit your code and preview the changes immediately on save then you are using Metro Bundler.

For me, when running a release build onUploadProgress works as expected.

[DigitalBrainJS]

If the issue is with the xhr adapter, then the problem is not with Axios itself, but with the implementation of XMLHttpRequest on the target platform. The problem may occur if the request size is not calculated. You can try manually setting the Content-Length header if it's not set automatically. If this wouldn't fix the issue, there's probably nothing we can do about it in the context of the xhr adapter, as it's most likely an internal platform issue.

facebook/react-native#11853
https://stackoverflow.com/questions/47623357/react-native-and-xmlhttprequest-upload-progress-bar

[abdoutech19]

I confirm the answer of @stharvey, in React Native the issue only occurs when running the app in debug mode, when running it in release mode the upload progress works as expected.

[MohamedKamalOthman]

I have the same problem on android

"axios": ^1.4.0.
"React Native": v0.76.7.

[stharvey]

Hello @MohamedKamalOthman - can you confirm that this is happening on your release builds?

This happens when running a debug build but should work correctly in release.

[MohamedKamalOthman]

Hello @stharvey - it's working on release builds but not on debug.

[stharvey]

Thanks for the update. As far as I am aware there is no way to get this working on debug builds. The debug server is acting as a proxy and the progress being reported is that initial transfer before being uploaded remotely.

It's nothing to be concerned about. The upload will still work and the promise will be returned when the remote transfer is complete.

[ahmed-khlifi]

i have the same issue using React js with vite

[Jamal-ReachFirst]

Same issue using react-native

"axios": "^1.1.2",
"react-native": "0.69.12",

[HP8585]

I'm stuck with the same issue in Nuxt 3 while sending a json body to the backend

[ahmed-khlifi]

Hello everyone, This issue is happen on DEV mode only, in production however the percentage calculation will work just fine.

[maroparo]

Can also confirm 🎉 , release builds do not have this issue. Spent a lot of time debuggin and trying different alternatives till I found this issue!

[milad145]

as @stharvey said, this bug occurs for the debug section and after releasing app it will work fine.
thank you @stharvey