0

I have a React webapp that gets an image, converts it to base64 then sends it over to my REST endpoint.

Trying to save the image directly from frontend to firebase storage works fine.

When I try to save it from my REST it throws:

[FirebaseStorageError [FirebaseError]: Firebase Storage: String does not match format 'base64': Invalid character found (storage/invalid-format)] {
  code: 'storage/invalid-format',
  customData: { serverResponse: null }
}

I initialize my storage like this:

const firebaseStorage = () => {
  if (firebase.apps.length === 0) {
    firebase.initializeApp(config.firebaseConfig);
  }

  return firebase.storage().ref();
};

And I try to upload to storage like this:

const URI = `images/${uid}/avatar`;
const ref = firebaseStorage().child(URI);
await ref.putString(image64, "data_url");

EDIT

After converting the base64 image to a Blob and trying to save it to storage via ref.put(blob) I get the following error:

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'byteLength' of undefined
Cristian G
  • 460
  • 1
  • 4
  • 22
  • Provide the way you get `image64` on the server-side. – hoangdv Mar 31 '21 at 11:35
  • @hoangdv I pass it as a string in a POST call. If I copy the string server side and paste it in a 64 decoder I can see the image correctly displayed. – Cristian G Mar 31 '21 at 12:41
  • Try with content type `pref.putString(image64, "data_url", {contentType: 'image/jpg'})` – hoangdv Mar 31 '21 at 12:45
  • @hoangdv my image is in jpeg format and even if I set contentType to `image/jpg` or `image/jpeg` it still doesn't work and throws the same thing – Cristian G Mar 31 '21 at 12:59
  • I've also tried stripping the base64 header "data:image/jpeg;base64," and use `ref.putString(image64, "base64")` and it still throws the same – Cristian G Mar 31 '21 at 13:03
  • No idea! Make sure that you are debugging, updating on the right line. – hoangdv Mar 31 '21 at 13:33
  • This https://stackoverflow.com/questions/52157253/firebase-storage-string-does-not-match-format-base64-invalid-character-found?rq=1 would make sense but I don't understand why it needs a string to encode into a base64 string. I have an image file which I need encoded, I don't understand what string it needs – Cristian G Mar 31 '21 at 14:03
  • Ignore previous comment, since it works from the frontend it means that the encoding is not the issue, or at least that's what I think – Cristian G Mar 31 '21 at 14:36

1 Answers1

0

did you try ref.putString(image64, 'base64url') ?

Nikolas L.
  • 545
  • 3
  • 7