React Native : convert local image to url - react-native

Question

I'm pretty new using React Native (Expo in this case) and Firebase database.
My problem is that when I upload an image in my app thanks to Image Picker, the link is a local link, so reading only with my device, and then deleted when I erase the cache
Here is my code :
useEffect(() => {
(async () => {
if (Platform.OS !== "web") {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== "granted") {
alert("Sorry, we need camera roll permissions to make this work!");
}
}
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
quality: 1,
});
if (!result.cancelled) {
setImage(result.uri);
}
};
// My current image is locate to : "file:///data/user/0/host.exp.exponent/cache/
// ExperienceData/ImagePicker/2abe4097-05ed-4d23-5648-f279d5a6f995.jpg"
// And what I want is to locate my image to : "https://someting..."
So I want to convert this image uri link in a url link, to be shared and never erased.
Anyone has an idea about how to proceed ?
Thanks a lot !

Answer 1

Let's break down the problem as below :
1. Pick an image from the Media Library.
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
quality: 1,
});
if (!result.cancelled) {
setImage(result.uri);
}
};
2. Fetch Image BLOB Data
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", [IMAGE_URI_HERE], true);
xhr.send(null);
});
3. Upload image BLOB to a remote server (Firebase Storage)
const metadata = { contentType: "image/jpg" };
const imgRef = firebase.storage().ref('folderName/fileName');
await imgRef.put(blob, metadata);
// We're done with the blob, close and release it
blob.close();
// Image permanent URL
const imgURL = await imgRef.getDownloadURL();