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

[atrauzzi]

• [✔️] Review the documentation: https://facebook.github.io/react-native
• [✔️] Search for existing issues: https://github.com/facebook/react-native/issues
• [✔️] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
Memory: 6.39 GB / 15.94 GB
Binaries:
Yarn: 1.12.1 - C:\Users\atrauzzi\AppData\Roaming\npm\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

Description

I've been working on a new react native project which needs to work with files. Given that the most optimal way to work with binary data in JS environments is via the Blob APIs, I set out to find my best option for getting binary references to local filesystem data.

After a bit of research, I discovered that I should be using the fetch API with local file paths. As a side note, it might have been nice to see official documentation about opening files here. Or possibly even a page dedicated to the topic as I'm sure it's fairly nuanced. 😄

Unfortunately when I went to open the file using fetch, I ended up experiencing this issue.

After a bit more research, it appears that this problem is generally confirmed and an in-depth analysis with a workaround has been documented by @sjchmiela here

//
// This is my adaptation of the suggested workaround.

const deferred = createDeferred<Blob>();
const xhr = new XMLHttpRequest();
        
xhr.responseType = "blob";
xhr.onload = () => deferred.resolve(xhr.response);
xhr.onerror = deferred.reject;

xhr.open("GET", uri, true);
xhr.send();

const blobFromFetch = await deferred.promise;

---

Possibly Related

• set blob as default XMLHttpRequest header response type if supported #22063
• Fetching blobs from filesystem results in blob-size: 0 #19717
• [Regression] [0.57] Fetching images on iOS fails with an empty fetch body and warning that "Received data was not a string, or was not a recognized encoding."  #21092
• FileSystem.readAsStringAsync base64 result is huge expo/expo#2703
• Support for Data Blobs? #16034
• Implement Blob support for XMLHttpRequest #11573

---

This seems like a regression as the standard API surface area and best practice for obtaining Blobs for local filesystem data is not working.

[atrauzzi]

Additionally, I'm noticing that after implementing the workaround, when I get to the point of trying to send my blob across the wire, I end up only sending something like this:

{"_data":{"blobId":"148cc94a-55a8-432d-871e-be32d045eaec","offset":0,"size":44684}}

This is as opposed to the actual bytes themselves. The routines I'm using to send this data work fine on browser and electron clients...

[atrauzzi]

So, this doesn't resolve the issue, but I think I see what's going on here:

• I obtain a "react-native blob" using the "react-native fetch" against a URI pointing to the filesystem
• If I attempt to pass this "react native blob" to the standard XMLHttpRequest that's used by axios, things break
• If I attempt to pass the "react native blob" to the "react-native fetch" to issue a request to a server, my bytes make it over, presumably because there's non-standard logic anticipating the "react native blob"

Assuming this is all correct, the problem here is that the react native project has made some compatibility-breaking alterations to the Blob implementation. Hopefully these can be resolved so that react native can retain the performance benefits of the Blob APIs as well as compatibility with the rest of the JavaScript ecosystem.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[atrauzzi]

Not stale.

[atticoos]

There's a secret key -- FileReader.

fetch uses the FileReader to consume the contents of the blob, as to be compliant with fetch:
https://github.com/github/fetch/blob/37d10362687492868548c4d70c5c12e4a671771e/fetch.js#L181-L186

React Native has a FileReader implementation, which takes the "JS blob pointer" and resolves it natively

react-native/Libraries/Blob/FileReader.js

Line 112 in b8d6ef3

NativeFileReaderModule.readAsText(blob.data, encoding).then(

The native FileReaderModule take the "blob pointer" and reads its bytes, then resolves them down as a string

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/blob/FileReaderModule.java

Lines 39 to 41 in b8d6ef3

	byte[] bytes =
	getBlobModule()
	.resolve(blob.getString("blobId"), blob.getInt("offset"), blob.getInt("size"));

---

My hunch is that axios may not use a FileReader to extract the blob?

[atrauzzi]

Not sure. But whatever is going on, it's breaking compatibility with standard JS network code.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[atrauzzi]

Leave it open.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[atrauzzi]

Leave it open.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[atrauzzi]

Leave it open.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[atrauzzi]

Not stale.

[lukeramsden]

Over 2 years since this: expo/expo#2402 (comment)

Is this still the recommended way?

[danieloi]

Odd that this is still a thing in 2021...

Still, I ❤️ React Native.

[atrauzzi]

I do too but they need to up their game.

[aliraza-noon]

When is this going to be fixed for god sake?

[JustinRohweller]

Over 2 years since this: expo/expo#2402 (comment)

Is this still the recommended way?

For me that solution causes a crash on the second image upload.
This one worked better:
expo/firebase-storage-upload-example#15 (comment)

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.