React Native : convert local image to url

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