Implement Blob support for XMLHttpRequest by satya164 · Pull Request #11573 · react/react-native

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

 "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 react/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 Closesreact/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 XMLHttpRequestJun 8, 2017

philikonand 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 be56a3eJan 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

Uh oh!

Conversation

satya164 commented Dec 20, 2016• edited by janicduplessis Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does the PR do?

Test plan

Release Notes

Uh oh!

facebook-github-bot commented Dec 20, 2016

Uh oh!

mkonicek commented Feb 1, 2017

Uh oh!

satya164 commented Feb 1, 2017

Uh oh!

brentvatne commented Mar 10, 2017

Uh oh!

hramosJan 19, 2018

Choose a reason for hiding this comment

Uh oh!

janicduplessisJan 19, 2018

Choose a reason for hiding this comment

Uh oh!

hramosJan 19, 2018

Choose a reason for hiding this comment

Uh oh!

hramos commented Jan 24, 2018

Uh oh!

serhiipalash commented Jan 26, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kureev commented Jan 26, 2018

Uh oh!

terribleben commented Jan 26, 2018

Uh oh!

mkonicek commented Jan 26, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

janicduplessis commented Jan 26, 2018

Uh oh!

sibelius commented Feb 8, 2018

Uh oh!

hramos commented Feb 8, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

laurent22 commented Apr 30, 2018

Uh oh!

satya164 commented Apr 30, 2018

Uh oh!

laurent22 commented Apr 30, 2018

Uh oh!

SudoPlz commented Nov 22, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

laurent22 commented Nov 22, 2019

Uh oh!

SudoPlz commented Nov 22, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

satya164 commented Dec 20, 2016•
edited by janicduplessis
Loading

serhiipalash commented Jan 26, 2018•
edited
Loading

mkonicek commented Jan 26, 2018•
edited
Loading

hramos commented Feb 8, 2018•
edited
Loading

SudoPlz commented Nov 22, 2019•
edited
Loading

SudoPlz commented Nov 22, 2019•
edited
Loading