React Native - upload image to Firebase storage

Question

First I create a blob file

  RNFetchBlob.fs.readFile(localImgUrl2, 'base64')
    .then(base64ImageStr => Blob.build('image.png', base64ImageStr, { type: 'image/png;BASE64' }))

......then i try to upload to firebase

    .then((data) => {FBStorageRef.put(data, { contentType: mime })})

...but it gives me the error

Firebase Storage: Object 'profilePics/image.png' does not exist

I believe its my FBStorageRef that it has a beef with.....my cloud storage is totally empty and I want to create a folder called profilePics.......and the file within I want to call image.png

const FBStorageRef = Firebase.storage().ref('/profilePics/image.png');

It says that profilePics/image.png doe not exist which is true enough.....but thats exactly why I want to upload it right :)

Answer 1

1. If the file path looks like file:///.... You can just simple put it to Firebase function, don't need readFile step.

My code works properly up to now:

  static uploadProfileAvatar(userID, fileURI) { // file URI is a path of a local image
    const updateTime = moment().unix();
    const storagePath = `${PROFILE_AVATAR_PATH}/${userID}_${updateTime}.jpg`;
    const fileMetaData = { contentType: 'image/jpeg' };
    return FirebaseStorage.uploadFile(fileURI, storagePath, fileMetaData);
  }

  static uploadFile(fileURI, storagePath, fileMetaData = null) {
    const uploadTask = firebase.storage().ref().child(storagePath).put(fileURI, fileMetaData);
    return uploadTask;
  }

2. If you have the path like rct-image-store://0. You have to write it and then get the local path image. After that upload local image as case 1

  ImageStore.getBase64ForTag(
    rctFileURI, // rct-image-store: path
    (base64Image) => {
      const imagePath = `${RNFS.DocumentDirectoryPath}/${new Date().getTime()}.jpg`;
      RNFS.writeFile(imagePath, `${base64Image}`, 'base64')
      .then((success) => {
        // now your file path is imagePath (which is a real path)
        if (success) {
          // upload with imagePath, same as the 1
        }
      })
      .catch(() => {});
    },
    () => {},
  );