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

Question

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);
  }
});

Answer 1

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');
  });
}

Answer 2

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