Android xhr.upload.onprogress and addEventListener('progress') not supported? #11853

dguillamot · 2017-01-11T23:58:49Z

Description

We are doing XMLHttpRequest PUT request (sending base64 encoded image data, setting content type header, etc).

iOS sends progress updates, Android does not.

We tried setting progress listener the following ways:

xhr.addEventListener('progress')
xhr.upload.addEventListener('progress')
xhr.upload.onprogress = () => {}
xhr.onprogress = () => {}

None of these handlers end up being called on Android, however on iOS they work fine.

The request completes successfully with a 200.

Reproduction

Solution

Additional Information

React Native version: 0.39.2
Platform: both Android and iOS tested (issue only on Android)
Operating System: MacOS

dguillamot · 2017-01-13T00:19:14Z

Ended up moving to a native (Obj-c and Java) solution for now which does provide upload progress events on Android.

Regarding XmlHttpRequest, not sure if the Android interface is different from iOS or not but no luck with XmlHttpRequest progress when uploading on Android.

christopherdro · 2017-01-16T07:27:02Z

@dguillamot Looks like there is some sort of API for progress on android.

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java

Line 190 in e87e181

public void onProgress(long bytesWritten, long contentLength, boolean done) {

dguillamot · 2017-01-16T07:44:44Z

@christopherdro Yes, I did see that last week but xhr.upload.addEventListener('progress') did not result in any updates on Android - only iOS. For now, we have solved it with a Native solution, thanks though.

bogobogo · 2017-02-16T17:20:29Z

Hey @dguillamot, would you mind sharing your solution? I am facing the same problem, and I currently don't have the knowledge to implement it natively (learning java but that will take me some time...).

GeoffreyPlitt · 2017-03-13T23:28:51Z

I'm on RN=0.42 and using XHR with a Content-Length set before uploading begins. I'm seeing the progress events, but no bytesSent or length or anything else that I can use to compute a progress%. Anybody else have luck with this?

ranjitpandit · 2017-06-11T01:06:03Z

Any ideas how to get send progress events on Android with bytesSent?

agu-z · 2017-06-22T14:01:42Z

@christopherdro Why is this issue closed? This problem persists, doesn't it?

1stman · 2017-08-30T03:09:07Z

i trying to upload video with youtube v3 api, and have some dilemma. When i use FormData , xhr.upload.onprogress is working. But then youtube api return processing error, because FormData add some data to file object. So, i use something like xhr.send({uri: url}); and it works, video is uploading, BUT xhr.upload.onprogress stopped working. I still don't know why...
P.S. sorry for my ugly english

Previously, only form-data request bodies emitted upload progress updates. Now, other request body types will also emit updates. Addresses issues: facebook#15724 facebook#11853

Summary: Previously, only form-data request bodies emitted upload progress updates. Now, other request body types will also emit updates. Addresses issues: #15724 #11853 This is a bug fix for functionality that's missing on Android. These events are already working correctly on iOS. Run the following code on Android, and ensure that events are being sent: ``` const fileUri = 'file:///my_file.dat'; const url = 'http://my_post_url.com/'; const xhr = new XMLHttpRequest(); xhr.upload.onprogress = (event) => { console.log('progress: ' + event.loaded + ' / ' + event.total); } xhr.onreadystatechange = () => {if (xhr.readyState === 4) console.log('done');} console.log('start'); xhr.open('POST', url); xhr.send({ uri: fileUri }); // sending a file (wasn't sending progress) xhr.send("some big string"); // sending a string (wasn't sending progress) const formData = new FormData(); formData.set('test', 'data'); xhr.send(formData); // sending form data (was already working) ``` [ANDROID] [BUGFIX] [XMLHttpRequest] - Added progress updates for all XMLHttpRequest upload types Previously, only form-data request bodies emitted upload progress updates. Now, other request body types will also emit updates. Addresses issues: #15724 #11853 Closes #16541 Differential Revision: D6325252 Pulled By: hramos fbshipit-source-id: 4fe617216293e6f451e2a1af4fa872e8f56d4f93

Summary: Previously, only form-data request bodies emitted upload progress updates. Now, other request body types will also emit updates. Addresses issues: facebook#15724 facebook#11853 This is a bug fix for functionality that's missing on Android. These events are already working correctly on iOS. Run the following code on Android, and ensure that events are being sent: ``` const fileUri = 'file:///my_file.dat'; const url = 'http://my_post_url.com/'; const xhr = new XMLHttpRequest(); xhr.upload.onprogress = (event) => { console.log('progress: ' + event.loaded + ' / ' + event.total); } xhr.onreadystatechange = () => {if (xhr.readyState === 4) console.log('done');} console.log('start'); xhr.open('POST', url); xhr.send({ uri: fileUri }); // sending a file (wasn't sending progress) xhr.send("some big string"); // sending a string (wasn't sending progress) const formData = new FormData(); formData.set('test', 'data'); xhr.send(formData); // sending form data (was already working) ``` [ANDROID] [BUGFIX] [XMLHttpRequest] - Added progress updates for all XMLHttpRequest upload types Previously, only form-data request bodies emitted upload progress updates. Now, other request body types will also emit updates. Addresses issues: facebook#15724 facebook#11853 Closes facebook#16541 Differential Revision: D6325252 Pulled By: hramos fbshipit-source-id: 4fe617216293e6f451e2a1af4fa872e8f56d4f93

…h on closed connection Summary: This PR includes the same changes made in #16541, for addressing issues #11853/#15724. It adds upload progress updates for uploads with any request body type, and not just form-data. Additionally, this PR also includes a commit for fixing an `IllegalStateException` when a user's connection gets closed or times out (issues #10423/#11016). Since this exception was occurring within the progress updates logic, it started being thrown more frequently as a result of adding progress updates to all uploads, which was why the original PR was reverted. To test the upload progress updates, run the following JS to ensure events are now being dispatched: ``` const fileUri = 'file:///my_file.dat'; const url = 'http://my_post_url.com/'; const xhr = new XMLHttpRequest(); xhr.upload.onprogress = (event) => { console.log('progress: ' + event.loaded + ' / ' + event.total); } xhr.onreadystatechange = () => {if (xhr.readyState === 4) console.log('done');} console.log('start'); xhr.open('POST', url); // sending a file (wasn't sending progress) xhr.setRequestHeader('Content-Type', 'image/jpeg'); xhr.send({ uri: fileUri }); // sending a string (wasn't sending progress) xhr.setRequestHeader('Content-Type', 'text/plain'); xhr.send("some big string"); // sending form data (was already working) xhr.setRequestHeader('Content-Type', 'multipart/form-data'); const formData = new FormData(); formData.append('test', 'data'); xhr.send(formData); ``` To test the crash fix: In the RN Android project, before this change, set a breakpoint at `mRequestBody.writeTo(mBufferedSink);` of `ProgressRequestBody`, and wait a short while for a POST request with a non-null body to time out before resuming the app. Once resumed, if the connection was closed (the `closed` variable will be set to true in `RealBufferedSink`), an `IllegalStateException` will be thrown, which crashes the app. After the changes, an `IOException` will get thrown instead, which is already being properly handled. As mentioned above, includes the same changes as #16541, with an additional commit. [ANDROID] [BUGFIX] [XMLHttpRequest] - Added progress updates for all XMLHttpRequest upload types / fix crash on closed connection Previously, only form-data request bodies emitted upload progress updates. Now, other request body types will also emit updates. Also, Android will no longer crash on certain requests when user has a poor connection. Addresses issues: 11853/15724/10423/11016 Closes #17312 Differential Revision: D6712377 Pulled By: mdvacca fbshipit-source-id: bf5adc774703e7e66f7f16707600116f67201425

…h on closed connection Summary: This PR includes the same changes made in facebook#16541, for addressing issues facebook#11853/facebook#15724. It adds upload progress updates for uploads with any request body type, and not just form-data. Additionally, this PR also includes a commit for fixing an `IllegalStateException` when a user's connection gets closed or times out (issues facebook#10423/facebook#11016). Since this exception was occurring within the progress updates logic, it started being thrown more frequently as a result of adding progress updates to all uploads, which was why the original PR was reverted. To test the upload progress updates, run the following JS to ensure events are now being dispatched: ``` const fileUri = 'file:///my_file.dat'; const url = 'http://my_post_url.com/'; const xhr = new XMLHttpRequest(); xhr.upload.onprogress = (event) => { console.log('progress: ' + event.loaded + ' / ' + event.total); } xhr.onreadystatechange = () => {if (xhr.readyState === 4) console.log('done');} console.log('start'); xhr.open('POST', url); // sending a file (wasn't sending progress) xhr.setRequestHeader('Content-Type', 'image/jpeg'); xhr.send({ uri: fileUri }); // sending a string (wasn't sending progress) xhr.setRequestHeader('Content-Type', 'text/plain'); xhr.send("some big string"); // sending form data (was already working) xhr.setRequestHeader('Content-Type', 'multipart/form-data'); const formData = new FormData(); formData.append('test', 'data'); xhr.send(formData); ``` To test the crash fix: In the RN Android project, before this change, set a breakpoint at `mRequestBody.writeTo(mBufferedSink);` of `ProgressRequestBody`, and wait a short while for a POST request with a non-null body to time out before resuming the app. Once resumed, if the connection was closed (the `closed` variable will be set to true in `RealBufferedSink`), an `IllegalStateException` will be thrown, which crashes the app. After the changes, an `IOException` will get thrown instead, which is already being properly handled. As mentioned above, includes the same changes as facebook#16541, with an additional commit. [ANDROID] [BUGFIX] [XMLHttpRequest] - Added progress updates for all XMLHttpRequest upload types / fix crash on closed connection Previously, only form-data request bodies emitted upload progress updates. Now, other request body types will also emit updates. Also, Android will no longer crash on certain requests when user has a poor connection. Addresses issues: 11853/15724/10423/11016 Closes facebook#17312 Differential Revision: D6712377 Pulled By: mdvacca fbshipit-source-id: bf5adc774703e7e66f7f16707600116f67201425

christopherdro added the Android label Jan 16, 2017

christopherdro closed this as completed Jan 16, 2017

allengleyzer mentioned this issue Oct 25, 2017

[Android] Added progress updates for all XMLHttpRequest upload types #16541

Closed

allengleyzer mentioned this issue Dec 21, 2017

[Android] Added progress updates for all XMLHttpRequest upload types / fix crash on closed connection #17312

Closed

MrHubble mentioned this issue Mar 6, 2018

Fixes XMLHttpRequest progress not having loaded mentioned, Fix Issue #3181 #16371

Closed

facebook locked as resolved and limited conversation to collaborators May 24, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 19, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Android xhr.upload.onprogress and addEventListener('progress') not supported? #11853

Android xhr.upload.onprogress and addEventListener('progress') not supported? #11853

dguillamot commented Jan 11, 2017

dguillamot commented Jan 13, 2017 •

edited

Loading

christopherdro commented Jan 16, 2017

dguillamot commented Jan 16, 2017

bogobogo commented Feb 16, 2017

GeoffreyPlitt commented Mar 13, 2017

ranjitpandit commented Jun 11, 2017

agu-z commented Jun 22, 2017 •

edited

Loading

1stman commented Aug 30, 2017

Android xhr.upload.onprogress and addEventListener('progress') not supported? #11853

Android xhr.upload.onprogress and addEventListener('progress') not supported? #11853

Comments

dguillamot commented Jan 11, 2017

Description

Reproduction

Solution

Additional Information

dguillamot commented Jan 13, 2017 • edited Loading

christopherdro commented Jan 16, 2017

dguillamot commented Jan 16, 2017

bogobogo commented Feb 16, 2017

GeoffreyPlitt commented Mar 13, 2017

ranjitpandit commented Jun 11, 2017

agu-z commented Jun 22, 2017 • edited Loading

1stman commented Aug 30, 2017

dguillamot commented Jan 13, 2017 •

edited

Loading

agu-z commented Jun 22, 2017 •

edited

Loading