Firebase Storage Upload Code using react native expo and using expo camera base64 string is below. But when I upload this base64 to firebase and when I open that URL in browser its showing a BROKEN IMAGE and in FIREBASE STORAGE its showing error in preview. Ps: I have set rules so that any one can read and write to storage for testing

import { Camera, CameraType } from "expo-camera";
  const capturePhoto = async () => {
    if (isCameraReady) {
      const options = {
        quality: 1,
        base64: true,
        fixOrientation: true,
        exif: true,
      };
      await cameraRef.takePictureAsync(options).then((photo) => {
        photo.exif.Orientation = 1;
        const aPhotoObj={
          base64:photo.base64,
          exif:{
            dateTimeOriginal:photo.exif.DateTimeOriginal,
            dateTimeDigitized:photo.exif.DateTimeDigitized
          }
        }

        setPhotosArray(oldArray=>[...oldArray,aPhotoObj]);
      });
    }
  };

The code above shows my EXPO camera function ,which returns a base64 string ,which i want to upload to storage and get URL

import {getDownloadURL,ref,uploadString } from "firebase/storage";
  getDownloadUrlFromMedia = async (base64, folderPath) => {
    try {
      return new Promise(async (resolve, reject) => {
        const imagename = new Date().getTime() + ".jpg";
        const path = `${new Date().getFullYear()}/${folderPath}/${imagename}`;
        const storageRef = ref(storage, path);
        const metadata = {
          contentType: "image/jpeg",
        };
        await uploadString(storageRef, base64, "base64", metadata).then(
          async () => {
            const imgUrl = await getDownloadURL(storageRef);
            resolve(imgUrl);
          }
        );
      });
    } catch (e) {
      console.error("Error converting image: ", e);
    }
  };

From this above code I am getting the imgUrl but its not working

I am new to REACT NATIVE.
I have used camera plugins in IONIC and had uploaded string to firebase in angular and IONIC. Which all worked very well. I was expecting the image to be seen in browser when I click on that StorageLink.

Display this image url is through <Image source={{my http url here}} >.

but when i open the url link in my browser its not visible.Just a broken image is visible and in the Storage section in firebase project also displays "Error in preview" Storage Section in Firebase says soThis is the broken image that shows on my browser when i click on the download URL http link

0

There are 0 answers