React Native - upload image to Firebase storage

6
votes

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 :)

2
firebasereact-nativefirebase-storage
Hey James, I use firebase storage to save images, this way right? I just take a photo URI from the picker and save it to firebase as image ".jpg"! - Oliver D
Please refer medium.com/@davidjsehl/… - hong developer
Yes @hongdevelop Ive read this article - unfortunately does not help......If you compare my code versus the article you will see it is mirrored very closely. However I have a feeling this issue is only related to uploading images to Firebase.....dont think theres anything wrong with code that uses rn-fetch-blob - james murphy
Hello James, did you check the "Rules" section? What do you have as a configuration? Maybe permissions or invalid configuration :) - Hristo Eftimov
I did Yes - rules are set for dev so anyone can read/write - james murphy

2 Answers

3
votes
  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;
  }
  1. 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(() => {});
    },
    () => {},
  );
0
votes

Use RNFirebase for handling firebase storage upload and download. check the below link for more details about installation. https://github.com/invertase/react-native-firebase/tree/master/packages/storage

then upload a file using below code

 import firebase from 'react-native-firebase';

  export const uploadMediaUri = (uri, path) => {

    return new Promise((resolve, reject) => {
        firebase.storage()
            .ref(path)
            .putFile(uri)
            .then(() => {
                resolve()
            })
            .catch(e => {
                reject(e)
            });
    })
}

Here uri is the local path that which file you want to upload and path is the upload path of firebase storage