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

atrauzzi commented 5 years ago

[✔️] 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

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 commented 5 years ago

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 commented 5 years ago

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[bot] commented 5 years ago

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 commented 5 years ago

Not stale.

atticoos commented 5 years ago

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 https://github.com/facebook/react-native/blob/b8d6ef372663fe6d467144abfc5d2c9352dc28d6/Libraries/Blob/FileReader.js#L112

The native FileReaderModule take the "blob pointer" and reads its bytes, then resolves them down as a string https://github.com/facebook/react-native/blob/b8d6ef372663fe6d467144abfc5d2c9352dc28d6/ReactAndroid/src/main/java/com/facebook/react/modules/blob/FileReaderModule.java#L39-L41

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

atrauzzi commented 5 years ago

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

stale[bot] commented 4 years ago

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 commented 4 years ago

Leave it open.

stale[bot] commented 4 years ago

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 commented 4 years ago

Leave it open.

stale[bot] commented 4 years ago

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 commented 4 years ago

Leave it open.

stale[bot] commented 4 years ago

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 commented 4 years ago

Not stale.