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.