I'm trying to create a blob in React Native using LaunchImageLibrary. My basic component is as follows:

import React from 'react'
import { Button, SafeAreaView } from 'react-native'
import { launchImageLibrary } from 'react-native-image-picker'


const Home = () => {

  const getImageFromLibrary = async () => {
    const result = await launchImageLibrary()

    const { uri } = result.assets[0]
    console.log(uri)
    // result: file:///Users/myMac/Library/Developer/CoreSimulator/Devices/7287EC81-054B-401E-942D-3978C6E308AF/data/Containers/Data/Application/6098A1CE-D49C-4ECD-8396-29BD0E8C598D/tmp/DBCF7839-8076-4D9A-8773-0F701EB58E0E.jpg

    const fetchedFile = await fetch(uri)
    console.log('FETCHED: ', fetchedFile)
    const blob =  await fetchedFile.blob()
    console.log('BLOB: ', blob)
  }

  return (
    <SafeAreaView>
      <Button onPress={getImageFromLibrary} title="Get from library" />    
    </SafeAreaView>
  )
}

export default Home

I get the following error:

Unhandled Promise Rejection (id: 1):
TypeError: fetchedFile.blob is not a function

I see other people able to use fetchedFile.blob() without any problem and I'm not sure why I'm having issues. I'm using an M1 mac, running iOS 15.5 emulator (iPhone13), using a create-react-app via npx.

CodePudding user response：

React Native Fetch API implementation which is based on whatwg-fetch in some scenario feel buggy when you work with a large chunk of data like bitmap files.

Alternative solution is using XMLHttpRequest API.

const getImageFromLibrary = async () => {
  const result = await launchImageLibrary();

  const { uri } = result.assets[0];
  console.log(uri);
  // result: file:///Users/myMac/Library/Developer/CoreSimulator/Devices/7287EC81-054B-401E-942D-3978C6E308AF/data/Containers/Data/Application/6098A1CE-D49C-4ECD-8396-29BD0E8C598D/tmp/DBCF7839-8076-4D9A-8773-0F701EB58E0E.jpg

  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", uri, true);
    xhr.send(null);
  });

  // Upload BLOB data to remote server...

  // We're done with the blob, close and release it
  blob.close();
};