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

16
votes

I'm working on a react-native and I need to upload an image to Firebase using Firebase Storage. I'm using react-native-image-picker to select the image from the phone which gives me the base64 encoded data.

When I try to upload the image to Firebase it gives me the error Firebase Storage: String does not match format 'base64': Invalid character found but I already checked if the string is a valid base64 string with regex and it is!

I already read a few answers from here but I tried all that. Here's my code:

function uploadImage(image){
  const user = getCurrentUser();
  const refImage = app.storage().ref(`profileImages/${user.uid}`);

  refImage.putString(image, 'base64').then(() => {
    console.log('Image uploaded');
  });
}

The image picker:

ImagePicker.showImagePicker(ImageOptions, (response) => {
  if (response.didCancel) {
    console.log('User cancelled image picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    uploadImage(response.data);
  }
});
4
javascriptandroidfirebasereact-nativefirebase-storage
Did you ever find a solution to this? I'm doing the exact same thing and can't seem to get it to work. – activelogic
@activelogic I ended up using react-native-fetch-blob to upload a blob instead of base64 string – corasan

4 Answers

10
votes

if image is a base64 data URL you can use 'data_url' parameter and metadata: 

function uploadImage(image){
  const user = getCurrentUser();
  const refImage = app.storage().ref(`profileImages/${user.uid}`);

  refImage.putString(image, 'data_url', {contentType:’image/jpg’}).then(() => {
    console.log('Image uploaded');
  });
}
7
votes

you need to remove this string from your image variable "data:image/jpeg;base64,. need only data

5
votes

image.substring(23) 

function uploadImage(image){
      const user = getCurrentUser();
      const refImage = app.storage().ref(`profileImages/${user.uid}`);

      refImage.putString(image.substring(23), 'base64').then(() => {
        console.log('Image uploaded');
      });
    }
2
votes

I use split().

function uploadImage(image){
  const user = getCurrentUser();
  const refImage = app.storage().ref(`profileImages/${user.uid}`);

  refImage.putString(image.split(',')[1], 'base64').then(() => {
    console.log('Image uploaded');
  });
}