0

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 May 14 '20 at 20:18
  • 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? –  May 14 '20 at 20:20
  • You might want to read the documentation to understand what it returns. Perhaps this is what you're using? https://github.com/joltup/rn-fetch-blob/wiki/File-System-Access-API#readfilepath-encodingpromise – Doug Stevenson May 14 '20 at 20:20
  • @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. –  May 14 '20 at 20:22
  • 1
    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 May 14 '20 at 20:43
  • Ok thanks for clarifying. I did originally think that, however when I first tried to use .putString(data, 'base64'), I got a "Firebase Storage: String does not match format 'base64': Invalid character found", I believed it might have been something else. I will update the question to reflect with new knowledge. –  May 14 '20 at 20:47

1 Answers1

0

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.