React-native Firebase storage upload using putString call

Question

I'm setting up this thread in order to clarify, whether firebase storage putString method does or does not work in React-native.

From what I've searched there is currently no way to upload File or Blob types to Firebase Storage using put method.

React Native does not support the File and Blob types, so Firebase Storage uploads will not work in this environment. File downloads do work however.

SOURCE: The Firebase Blog

Thus this call

firebase.storage().ref()
.child(userID)
.put(new File(['this is a small amount of data'], 'sample-text.txt', { type: "text/plain" }), { type: "text/plain" })
.then(p => {console.log(p)})
.catch(p => {console.log(p)})

does not work and ends up with response

code : "storage/unknown" message : "Firebase Storage: An unknown error occurred, please check the error payload for server response." name : "FirebaseError" serverResponse : "Multipart body does not contain 2 or 3 parts."

Nevertheless there is another option to upload data to Firebase Storage, using Firebase storage putString method. Which works with plain string. But even if I use this method to upload. I'm getting the same server reponse as before.

firebase.storage()
.ref()
.child(userID)
.putString('string')
.then(p => {console.log(p)})
.catch(p => {console.log(p)});

Bu from what I've learned from this answer. The putString way should work.

What am I doing wrong? The code works fine for me in React. Whenever I paste to React-native. It stops working.

Try react-native-fetch-blob, the library makes it possible to upload file in React Native. It also provides a sample app — Ven Jest
I ended up trying both react-native-fetch-blob and react-native-firestack. I wasn't able to make either of those work .. — jankoritak
groups.google.com/forum/#!searchin/firebase-talk/react$20native/… Firebase Storage is currently not supported in React Native — sdfsdf

MrBrownser MrBrownser · Accepted Answer · 2016-08-30T16:39:57

I've just tried react-native-fetch-blob as Ven commented before, and I was able to make it work, try using this snippet from the index file in the example:

1) Before class declaration:

import RNFetchBlob from 'react-native-fetch-blob';
const Blob = RNFetchBlob.polyfill.Blob;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

2) Inside the storing method:

let filePath = 'YOUR/FILE/PATH';
let fileName = 'file_name.jpg';
let rnfbURI = RNFetchBlob.wrap(filePath);
// create Blob from file path
Blob
.build(rnfbURI, { type : 'image/png;'})
.then((blob) => {
  // upload image using Firebase SDK
  firebase.storage()
    .ref('images')
    .child(fileName)
    .put(blob, { contentType : 'image/jpg' })
    .then((snapshot) => {
      console.log('Uploaded', snapshot.totalBytes, 'bytes.');
      console.log(snapshot.metadata);
      var url = snapshot.metadata.downloadURLs[0];
      console.log('File available at', url);
    }).catch(function(error) {
      console.error('Upload failed:', error);
    });

React-native Firebase storage upload using putString call

1 Answers