How to upload image to Firebase using React Native – Flutter & React Native Made Easy

Uploading image to firebase is one of the most complicated part of developing a image based ( React Native) app. In this article we will unravel this complicated puzzle, so that, it is a cake walk for us next time we code a firebase image upload feature.

We will we using following two pre-build components for our article :

If you go through the Firebase documentation about uploading files, you will learn, that before uploading file we need to convert it to either one of the formats, like File, Blob, Base64 etc. So, we will first convert the file into base64 format and then into Blob format and then we can use firebase ‘put’ method to upload the file to Firebase Google Cloud Storage bucket.

Here is the code to convert file to a format supported by Firebase and then successfully upload it to Firebase storage :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import firebase from 'firebase'
import RNFetchBlob from 'react-native-fetch-blob'
import CameraRollPicker from 'react-native-camera-roll-picker'
export default class Gallery extends Component {
  
  getSelectedImages = (selectedImages, currentImage) => {
    
    const image = currentImage.uri

    const Blob = RNFetchBlob.polyfill.Blob
    const fs = RNFetchBlob.fs
    window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
    window.Blob = Blob

   
    let uploadBlob = null
    const imageRef = firebase.storage().ref('posts').child("test.jpg")
    let mime = 'image/jpg'
    fs.readFile(image, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` })
    })
    .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
      .then(() => {
        uploadBlob.close()
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        // URL of the image uploaded on Firebase storage
        console.log(url);
        
      })
      .catch((error) => {
        console.log(error);

      })  

  }
  render() {

    return (
      <View style={styles.gallery}>
        <CameraRollPicker selected={[]} maximum={1} callback={this.getSelectedImages} />
        <Text style={styles.welcome}>
          Image Gallery
        </Text>        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  gallery: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

Once the image is uploaded successfully, you will get the url which points to the image uploaded on firebase. You can save this url to firebase database and fetch it later to render it in your react native app using Image component.

Here is demo of firebase image upload using react native :