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)

Most upvoted comments

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-minimum to initialize a blank project, and go from there 😄