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.

Answer 1

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