Implement Blob support for XMLHttpRequest #11573

satya164 · 2016-12-20T23:40:49Z

This PR is a followup to #11417 and should be merged after that one is merged.

What does the PR do?

Add support for creating blobs from strings, not just other blobs
Add the File constructor which is a superset of Blob
Add the FileReader API which can be used to read blobs as strings or data url (base64)
Add support for uploading and downloading blobs via XMLHttpRequest and fetch
Add ability to download local files on Android so you can do fetch(uri).then(res => res.blob()) to get a blob for a local file (iOS already supported this)

Test plan

Clone the repo https://github.com/expo/react-native-blob-test
Change the package.json and update react-native dependency to point to this branch, then run npm install
Run the server.js file with node server.js
Open the index.common.js file and replace localhost with your computer's IP address
Start the packager with yarn start and run the app on your device

If everything went well, all tests should pass, and you should see a screen like this:

!

Pull to rerun all tests or tap on specific test to re-run it

Release Notes

[GENERAL] [FEATURE] [Blob] - Implement blob support for XMLHttpRequest

facebook-github-bot · 2016-12-20T23:41:36Z

By analyzing the blame information on this pull request, we identified @mkonicek and @javache to be potential reviewers.

mkonicek · 2017-02-01T11:13:56Z

Would it be possible to revert the changes in the 2048 example to make this PR easier to review (less changed files)? Also does the 2048 example need changes? Probably doesn't do HTTP requests?

satya164 · 2017-02-01T11:15:46Z

cc @grabbou could you revert those changes please?

brentvatne · 2017-03-10T17:58:38Z

ping @grabbou

Fix import paths after rebasing Modify build targets

hramos · 2018-01-19T20:22:06Z

package.json

@@ -198,6 +198,7 @@
    "serve-static": "^1.13.1",
    "shell-quote": "1.6.1",
    "stacktrace-parser": "^0.1.3",
+    "uuid": "^3.0.1",


Is this necessary? uuid has been in use without this dependency (see https://github.com/facebook/react-native/pull/11573/files#diff-d7db9e5e49c3ea163f89547a0be6a438L19 in this PR).

This is one of the blockers, as adding the uuid package may conflict with another uuid dependency that we use internally at Facebook.

This looks kind of bad, it probably only works because of some transitive dependency that also includes uuid.

Not sure what the best solutions would be, we could vendor the uuid module used internally or maybe add it to fbjs.

Another solution that could work is to use the uuid v4 import directly so require('uuid/v4') (https://github.com/kelektiv/node-uuid#quickstart---commonjs-recommended)

Per #16543 looks like the missing uuid package is causing issues for some folks.

hramos · 2018-01-24T01:17:35Z

This is now in a good state internally and ready to land. Just need to get it looked at one more time by another Facebook employee. Once it's approved internally, I'll land it.

Adding commits to the PR resets the diff to Needs Review internally so let's avoid doing that for now. We're so close!

serhiipalash · 2018-01-26T17:30:47Z

Thanks to everyone who did this!

Kureev · 2018-01-26T17:31:45Z

Woah! This is huuuge! 🔥🔥🔥

terribleben · 2018-01-26T17:59:02Z

mkonicek · 2018-01-26T20:59:36Z

OMG it's merged! Amazing work @satya164 and reviewers!

janicduplessis · 2018-01-26T23:37:57Z

Thanks to everyone involved!! The PR actually has commits from 6 different persons + 6 additional reviewers!

sibelius · 2018-02-08T13:39:55Z

landed on RN53 or RN54?

hramos · 2018-02-08T17:01:50Z

@sibelius you can check which releases a commit belongs to by looking at the tags on the commit itself. If you go to be56a3e, you can see it does not belong to any release yet (it's only tagged master as of this writing). This commit should get picked up the next time a release candidate is packaged.

Summary: This PR is a followup to facebook/react-native#11417 and should be merged after that one is merged. 1. Add support for creating blobs from strings, not just other blobs 1. Add the `File` constructor which is a superset of `Blob` 1. Add the `FileReader` API which can be used to read blobs as strings or data url (base64) 1. Add support for uploading and downloading blobs via `XMLHttpRequest` and `fetch` 1. Add ability to download local files on Android so you can do `fetch(uri).then(res => res.blob())` to get a blob for a local file (iOS already supported this) 1. Clone the repo https://github.com/expo/react-native-blob-test 1. Change the `package.json` and update `react-native` dependency to point to this branch, then run `npm install` 1. Run the `server.js` file with `node server.js` 1. Open the `index.common.js` file and replace `localhost` with your computer's IP address 1. Start the packager with `yarn start` and run the app on your device If everything went well, all tests should pass, and you should see a screen like this: ![screen shot 2017-06-08 at 7 53 08 pm](https://user-images.githubusercontent.com/1174278/26936407-435bbce2-4c8c-11e7-9ae3-eb104e46961e.png)! Pull to rerun all tests or tap on specific test to re-run it [GENERAL] [FEATURE] [Blob] - Implement blob support for XMLHttpRequest Closes facebook/react-native#11573 Reviewed By: shergin Differential Revision: D6082054 Pulled By: hramos fbshipit-source-id: cc9c174fdefdfaf6e5d9fd7b300120a01a50e8c1

laurent22 · 2018-04-30T13:10:50Z

Is there any documentation for using blobs?

satya164 · 2018-04-30T13:14:05Z

MDN is your friend

laurent22 · 2018-04-30T13:19:50Z

Ok I missed that it was an implementation of the standard, I thought it was more like rn-fetch-blob. Some doc about it would probably help anyway. I'll submit a pull request if I can get it to work.

SudoPlz · 2019-11-22T21:44:37Z

@laurent22 did you figure it out?

I'm still struggling with understanding how to create a Blob out of a local file file:///blablabla/blabla from the device photo library, so that I can then upload it somewhere.

Thanks

laurent22 · 2019-11-22T22:31:44Z

I've never figured it out, so I've ended up using rn-fetch-blob

SudoPlz · 2019-11-22T22:52:08Z

@laurent22 just figured this out.

It's a lot simpler that what I imagined.

Check this out: https://stackoverflow.com/a/59002760/1658268

I hope this saves time from others looking to do the same thing.

Summary: The eslint community config does not have the File and Blob polyfills in `globals` which have been part of the Javascript implementation for ~3 years. They were added to the Javascript API in #11573 by satya164. ## Changelog  [General] [Fixed] - Added File and Blob globals to eslint community config Pull Request resolved: #31293 Test Plan: Evidence these globals exist: 1. #11573 2. Executed the following: <img width="421" alt="Screen Shot 2021-04-02 at 12 08 50 PM" src="https://user-images.githubusercontent.com/3495974/113432946-466ae280-93ac-11eb-899c-3ca124e0af84.png"> <img width="317" alt="Screen Shot 2021-04-02 at 12 11 56 PM" src="https://user-images.githubusercontent.com/3495974/113433156-a82b4c80-93ac-11eb-99dc-0840d5ad9078.png"> 3. Receive in console: <img width="603" alt="Screen Shot 2021-04-02 at 12 09 59 PM" src="https://user-images.githubusercontent.com/3495974/113432996-5da9d000-93ac-11eb-81c6-88e6b059c733.png"> <img width="599" alt="Screen Shot 2021-04-02 at 12 12 27 PM" src="https://user-images.githubusercontent.com/3495974/113433174-b711ff00-93ac-11eb-8820-67039696f6ce.png"> Evidence the PR works: the globals in the PR identical to the others in the eslint community config that they are in Reviewed By: cipolleschi Differential Revision: D37214364 Pulled By: cortinico fbshipit-source-id: 71b9dec8d222a057c54f6cde6c6d8e85dd25f6f9

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Dec 20, 2016

satya164 mentioned this pull request Mar 23, 2017

[BREAKING on iOS] Add blob implementation with WebSocket integration #11417

Closed

shergin added Android Platform: iOS iOS applications. labels May 30, 2017

satya164 changed the title ~~[WIP] Implement Blob support for XMLHttpRequest~~ Implement Blob support for XMLHttpRequest Jun 8, 2017

philikon and others added 20 commits June 12, 2017 06:10

Add blob implementation with WebSocket integration

642d451

Fix import paths after rebasing Modify build targets

Add a 'fromURI' method to blob

be07fa9

Fix blob not sliced when offset is 0

e8ea388

Add blob support to XMLHttpRequest

553f20e

Make blob properties read-only following the spec

aaba705

Add a basic implementation for FileReader on Android

22ebafb

Fix getting mime type

781e9e6

Add unit tests for Blob and File

109a465

Implement creating blob from string

2746628

Add tests for blob module

a60605d

Cast blob parts to string

d4b62b9

Fix counting bytes

600217a

Fix test for createFromParts

b1614c1

Don't allow accessing data after blob is closed

8ad6369

Keep track of blobs and release when blobs are released

968a7b8

Fix typo in BlobManager

60f8ebb

Use fetch to retrive blob from URI

f56c66b

Add support for downloading blobs on iOS

7c0d8b2

Fix typo in base64 conversion

d62da30

Fix uploading blob via XHR

39feed9

hramos reviewed Jan 19, 2018

View reviewed changes

hramos mentioned this pull request Jan 19, 2018

Add uuid dependency needed by react-native/Libraries/Blob/Blob.js. #16936

Closed

janicduplessis added 2 commits January 22, 2018 20:02

Import uuid from uuid/v4 to avoid conflict with internal fb haste module

2f15886

Fix test runner

d56239b

facebook-github-bot closed this in be56a3e Jan 26, 2018

jeskew mentioned this pull request Feb 13, 2018

S3 Multipart upload React Native aws/aws-sdk-js#1924

Closed

piranna mentioned this pull request Mar 1, 2018

Check for Blob instead of File therealparmesh/object-to-formdata#9

Closed

craftzdog mentioned this pull request Mar 5, 2018

Attachments Support seigel/pouchdb-react-native#68

Open

jesenko mentioned this pull request May 14, 2018

fetch() leaks memory on each request due to unreleased Blobs #19248

Closed

3 tasks

ma-pe mentioned this pull request Aug 30, 2018

Support for blobs MaxToyberman/react-native-ssl-pinning#2

Open

atrauzzi mentioned this pull request Dec 18, 2018

Using fetch to obtain blob results in ERR_FILE_NOT_FOUND & "Network request failed", workaround gets superficial string representation #22681

Closed

dantman mentioned this pull request Jul 27, 2019

cache files when files comes from contents provider react-native-documents/document-picker#224

Closed

This was referenced Apr 2, 2021

add file and blob globals to eslint config shamilovtim/react-native#1

Closed

add file and blob globals to eslint config #31293

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Blob support for XMLHttpRequest #11573

Implement Blob support for XMLHttpRequest #11573

satya164 commented Dec 20, 2016 •

edited by janicduplessis

facebook-github-bot commented Dec 20, 2016

mkonicek commented Feb 1, 2017

satya164 commented Feb 1, 2017

brentvatne commented Mar 10, 2017

hramos Jan 19, 2018

janicduplessis Jan 19, 2018

hramos Jan 19, 2018

hramos commented Jan 24, 2018

serhiipalash commented Jan 26, 2018 •

edited

Kureev commented Jan 26, 2018

terribleben commented Jan 26, 2018

mkonicek commented Jan 26, 2018 •

edited

janicduplessis commented Jan 26, 2018

sibelius commented Feb 8, 2018

hramos commented Feb 8, 2018 •

edited

laurent22 commented Apr 30, 2018

satya164 commented Apr 30, 2018

laurent22 commented Apr 30, 2018

SudoPlz commented Nov 22, 2019 •

edited

laurent22 commented Nov 22, 2019

SudoPlz commented Nov 22, 2019 •

edited

Implement Blob support for XMLHttpRequest #11573

Implement Blob support for XMLHttpRequest #11573

Conversation

satya164 commented Dec 20, 2016 • edited by janicduplessis

What does the PR do?

Test plan

Release Notes

facebook-github-bot commented Dec 20, 2016

mkonicek commented Feb 1, 2017

satya164 commented Feb 1, 2017

brentvatne commented Mar 10, 2017

hramos Jan 19, 2018

Choose a reason for hiding this comment

janicduplessis Jan 19, 2018

Choose a reason for hiding this comment

hramos Jan 19, 2018

Choose a reason for hiding this comment

hramos commented Jan 24, 2018

serhiipalash commented Jan 26, 2018 • edited

Kureev commented Jan 26, 2018

terribleben commented Jan 26, 2018

mkonicek commented Jan 26, 2018 • edited

janicduplessis commented Jan 26, 2018

sibelius commented Feb 8, 2018

hramos commented Feb 8, 2018 • edited

laurent22 commented Apr 30, 2018

satya164 commented Apr 30, 2018

laurent22 commented Apr 30, 2018

SudoPlz commented Nov 22, 2019 • edited

laurent22 commented Nov 22, 2019

SudoPlz commented Nov 22, 2019 • edited

satya164 commented Dec 20, 2016 •

edited by janicduplessis

serhiipalash commented Jan 26, 2018 •

edited

mkonicek commented Jan 26, 2018 •

edited

hramos commented Feb 8, 2018 •

edited

SudoPlz commented Nov 22, 2019 •

edited

SudoPlz commented Nov 22, 2019 •

edited