React Native + Firebase Storage: base64 and blob not working

Question

I'm trying to use to either encode my image file as base64 or blob, but neither of them are working. I'm also using this: https://github.com/react-community/react-native-image-picker to manage the image picker.

Try 1: Using Image picker's .data method, which is supposed to return a base64 string

const blah = uuid.v4();
firebase
  .storage()
  .ref('images')
  .child(`${blah}.jpg`)
  .putString(file.data, 'base64', { contentType: 'image/jpeg' })

But this throws: Firebase Storage: String does not match format 'base64': Invalid character found

Try 2: Blob using https://github.com/wkh237/react-native-fetch-blob

      const uri = file.uri;
      const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
      data = RNFetchBlob.fs.readFile(uploadUri, 'base64')
      blob = RNFetchBlob.polyfill.Blob.build(data, { type: 'application/octet-stream;BASE64' })
      const uniqueId = uuid.v4();
      const firebaseRef = firebase.storage().ref('images').child(`${uniqueId}.jpg`)
      return Observable.fromPromise(firebaseRef.put(blob, { contentType: 'application/octet-stream;BASE64' }));
    })

However, it is returning: Firebase Storage: Invalid argument inputat index 0: Expected Blob or File.

Try 3: base64 using https://github.com/wkh237/react-native-fetch-blob

      const uri = file.uri;
      const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
      data = RNFetchBlob.fs.readFile(uploadUri, 'base64')
      const uniqueId = uuid.v4();
      const firebaseRef = firebase.storage().ref('images').child(`${uniqueId}.jpg`)
      const metadata= {
        contentType: 'image/jpeg',
      };
      firebaseRef.putString(data, 'base64', metadata);

But this again throws: Firebase Storage: String does not match format 'base64': Invalid character found

Does anyone know what I'm doing wrong?

I'm running into this exact same issue. The really weird thing is that the .data works when the react native debugger is turned on — Tyson Cadenhead

a.toraby a.toraby · Accepted Answer · 2020-02-04T12:29:45

Back in the day I used version 5.5.6 recently I updated to version 6.2.0 and ran to the same issue.

const uri = Platform.OS === 'ios' ? response.uri.replace('file://', '') : response.uri
const imageRef = storage().ref('images/').child("blah")
await imageRef.put(uri)
const imageUrl = await imageRef.getDownloadURL()

I just changed .put to .putFile and everything worked again

React Native + Firebase Storage: base64 and blob not working

2 Answers