expo: How to get the blob of a local file without using fetch? Fetch crashes with large files
For context, I’m trying to upload a blob of a video file to Google Drive and Google Photos. It works fine for most files, but if the file is large, e.g. > 300 MB, then fetch(localFileUri) will crash, both in the Expo client and also in the standalone app.
I’m using ImagePicker to find the video on my Galaxy S10e, and then I use fetch to load it from the result.uri which was returned from the ImagePicker
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: false,
quality: 1,
});
if (!result.cancelled) {
const imageData = await fetch(result.uri) // <-- This line crashes with the error
const blob = await imageData.blob();
// Start upload, etc.
}
My guess is that fetch is trying to load the entire video to memory, which causes the crash, or something else is going on.
Is there an alternative to get the blob of a file, in order to upload it to Google? If I add the video uri to a FormData, then I believe fetch will try to convert it to base64, which isn’t ideal.
I’ve also tried writing my own XMLHttpRequest - which also crashes.
Here’s the crash stack:
Stack trace:
node_modules\whatwg-fetch\dist\fetch.umd.js:473:29 in xhr.onerror
node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
[native code]:null in callFunctionReturnFlushedQueue
...
Expo CLI 3.11.7 environment info: System: OS: Windows 10 Binaries: Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5900203
App target is iOS and Android as standalone app.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 16 (2 by maintainers)
Not solved yet.
This issue has been automatically closed since there has not been any recent activity after it was marked as stale. Please open a new issue for any related bugs.
I’m also getting this issue. I’ll investigate and see if I can repro on an expo-bare project.
Best way to try it on a bare react native project is by running
expo init -t bare-minimumto initialize a blank project, and go from there 😄