CODEWITHSUNDEEP
firebasereact-nativefirebase-storage
bigpotato
bigpotato

Reputation: 27497

React Native + Firebase Storage: base64 and blob not working

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?

Upvotes: 4

Views: 1844

Answers (2)

a.toraby
a.toraby

Reputation: 3391

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

Upvotes: 2

Francesco
Francesco

Reputation: 1148

about (try 1) you have to use 'data_url': 

.putString(file.data, 'data_url', { contentType: 'image/jpeg' })

Upvotes: 0

Related Questions