Upload to Firebase Storage from React Native

Question

I'm seeing a lot of talk about uploading to Firebase storage from React Native, but all seem to be how to get around the fact that React Native doesn't support Blobs or Files. But Firebase has a putString method for uploading base64 encoded files.

Why does this code, for example, work in a browser but not in React Native:

var base64String = "iVBORw0KGgoAAAA...";
firebase
  .storage()
  .ref()
  .child(`test/test.png`)
  .putString(base64String, 'base64')
  .then(function(snapshot) {
    console.log('Uploaded a base64 string!');
  })
  .catch(function(err) {
    console.log('Problems', err);
  });

No errors are given in React Native, but no file arrive in Firebase. What gives?

Given that putString() is thennable, it probably also defines a catch() that is called when there are errors: .putString(base64String, 'base64') .then(function(snapshot) { console.log('Uploaded a base64 string!'); }).catch(function(error) { console.error(error); }); — Frank van Puffelen
It's a good point, though. I've added a catch to the example. Even with it, nothing is being logged to the console. — nicholas
Thanks Xeijp. That's exactly my question, yes. But again the only answer seems to be to extend React Native to use Blobs and doesn't answer the question of why the putString method, which shouldn't require a blob, fails. — nicholas

sphippen sphippen · Accepted Answer · 2016-09-02T19:10:55

Firebase Storage JS dev here.

To be clear, at time of writing (Sept 2 2016) Firebase Storage uploads are not supported in React Native.

To answer your question about why uploads work in a browser but not React Native: our putString() method doesn't need Blob support, but if you pass in a base64 string our library still has to be able to send the binary data somehow.

In a modern browser, you can store binary data in an ArrayBuffer and send it as the body of an XMLHttpRequest or Fetch request - not so in React Native.

As far we can tell, the React Native core libraries don't currently provide a good way to send in-memory binary data as the body of an HTTP request.

Upload to Firebase Storage from React Native

1 Answers