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

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

Answer 2

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

Answer 3

I have used google bucket url instead of using firebase/storage api, and expo-file-system package to load the image/video from the mobile phone to firebase. Here is my code:

const sendPhotoOrVideo = () => {
    FileSystem.uploadAsync(
      'https://storage.googleapis.com/upload/storage/v1/b/YOUR_BUCKET_NAME/o?uploadType=media&name=FILE_NAME',
      'FILE_LOCATION',
      {
        headers: {
          Authorization:
            'Bearer YOUR_OAUTH2_TOKEN',
        },
      },
    )
}

FileSystem.uploadAsync comes from expo-file-system package. 'FILE_LOCATION' fetched using expo-image-picker package.

Answer 4

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 5

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