Cannot upload react-native-camera TakePictureResponse to Firebase Storage

Question

I am trying to use react-native-camera to take a photo then upload that photo to Firebase storage. I am able to retrieve the file as a blob using RNFetchBlob, however when trying to .put() into Firebase Storage, I get a

Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.

I also tried to use .putString() and pass it in as a base64 string, or just the uri however I get similar issues. Here is some related code.

export function createPhoto(photo: TakePictureResponse): Boolean {
  var ref = storage.ref();
  var photoRef = ref.child('photos');
  if (Platform.OS === 'ios') {
    var filePath = photo.uri.replace('file:', '');
  } else {
    filePath = photo.uri.split('raw%3A')[1].replace(/\%2F/gm, '/');
  }
  RNFetchBlob.fs.readFile(filePath, 'base64').then((data) => {
    photoRef.put(data).then((snapshot) => {
      console.log('Uploaded a photo');
      console.log(snapshot.downloadURL);
    });
  });

Update: RNFetchBlob.fs.readFile() returns a string depending on the decoder option you pick (for this example it is base64). However I still have issues as Firebase Storage will not accept my base64 string with .putString(data, 'base64'). I get a "Firebase Storage: String does not match format 'base64': Invalid character found" error.

Your current code passes in a string, which put doesn't accept. While calling putString may also not work, the error message is likely to be different and putString is the correct message to call for the rest of your code. — Frank van Puffelen
So what I am understand from your reply is that RNFetchBlob.fs.readFile() returns a string stored in 'data'. I was under the impression that it returned a blob from the file path given as an argument. So this string is just a base64 representation of the image? — user7842007
You might want to read the documentation to understand what it returns. Perhaps this is what you're using? github.com/joltup/rn-fetch-blob/wiki/… — Doug Stevenson
@Doug Stevenson I read the documentation and all I gathered was that it returned a promise, if using .then operator I receive 'data' which didn't have any more information other than that. Unless I am mistaken and misread it. — user7842007
You've told the API that you want base64 data, which is a string. The description of the encoding parameter says: "Decoder to decode the file data, should be one of base64, ascii, and utf8, it uses utf8 by default.". Those are all going to be strings. — Doug Stevenson

Unknown Unknown · Accepted Answer · 2020-05-14T21:30:32

Since I am using React Native, the reason why I am having issues has been answered in another post right here. https://stackoverflow.com/a/52174058/7842007

It basically has to do with react native not being able to handle atob and btoa which is what firebase storage is using, therefore you have to set it up in your index.js either by using a library such as 'encode-64' or by creating your own library.

Cannot upload react-native-camera TakePictureResponse to Firebase Storage

1 Answers