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.
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();
};