putString base64 upload fails in React Native: provide atob and drop the native Blob

TL;DR

Second, Firebase tries to use the native Blob class, but React Native's Blob incorrectly converts Uint8Array data to a string and corrupts the upload.

Steps

1. What was reported:

Issue firebase/firebase-js-sdk#576 (closed, 13 comments): Uploading a base64-encoded image to Firebase Storage with putString() fails in React Native (and Node) with a confusing "invalid character" error, even though the same code works on web.

2. What works:

Two environment problems, both with workarounds, per commenter adelphes. First, there is no atob in React Native or Node, and the Firebase web SDK uses atob to decode base64 input: import or implement an atob function and attach it to the global object. Second, Firebase tries to use the native Blob class, but React Native's Blob incorrectly converts Uint8Array data to a string and corrupts the upload. Workaround: temporarily delete the Blob class from the global object before calling putString, which forces Firebase to fall back to its own bundled Blob implementation, then restore it after the upload.

When to use

You are seeing this: What was reported: Issue firebase/firebase-js-sdk#576 (closed, 13 comments): Uploading a base64-encoded image to Firebase Storage with putString() fails in React Native (and Node) with a confusing "invalid character" error, even though the same code works... Use this skill when you run into "putString base64 upload fails in React Native: provide atob and drop the native Blob".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

In the GitHub issue, the reporter asked: putString base64 upload fails in React Native: provide atob and drop the native Blob. The working answer that came out of the thread: Two environment problems, both with workarounds, per commenter adelphes. First, there is no atob in React Native or Node, and the Firebase web SDK uses atob to decode base64 input: import or implement an atob function and attach it to the global object. Second, Firebase tries to use the native Blob class, but React Native's Blob incorrectly converts Uint8Array data to a string and corrupts the upload. Workaround: temporarily delete the Blob class from the global object before calling putString, which forces Firebase to fall back to its own bundled Blob implementation, then restore it after the upload. Source: https://github.com/firebase/firebase-js-sdk/issues/576