Upload Documents to Firebase using Expo React Native

✏️ Last few days I was working on my personal project and there was a requirement of uploading pdf documents using expo react native application to the firebase. Since I also new to react native I had to read several articles in order to get it done. Therefore the objective behind writing this article is to help someone who will have the same kind of requirement in the future. So that he or she might be able to save lot of time !

In this article I will explain the code segments which is used to upload the documents and a complete sample project can be found in the master branch of this repository (link). Having a basic knowledge about expo react native will be helpful for the better understanding

📋 Project Setup

1. create a new project using react native expo. Make sure to choose a blank template

expo init document-picker

2. Configure firebase into your project. (Documentation Link)

• First open a terminal and type the following code

expo install firebase@9.4.1

📔 Note :- Make sure to use the same version(9.4.1) of the firebase when installing because sometimes it gives errors.

• Create a folder in the root and inside that folder create a file called config.js. The Project structure and the config.js should look like follows. Please make sure to replace the firebaseConfig in config.js with your app’s Firebase project configuration

import { getFirestore } from 'firebase/firestore'
import {getStorage} from 'firebase/storage'
import { initializeApp } from 'firebase/app';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app)

3. Before Start implementing the project Lets install few dependencies

• expo document picker(Documentation Link)

expo document picker(Documentation Link)

• Lottie View for animations (optional)

expo install lottie-react-native

⚒️ Implementation

Since Source code for the project can be found in this GitHub link.(master branch) for the sake of simplicity. I will explain only the main components which are related to document upload. below high level diagram shows how the basic components are arranged.

📝 pickDocument

This is a asynchronous function which is responsible for read the file from the device storage using the DocumentPicker.getDocumentAsync function as a file and convert it to a Blob file format.

after converting the file into a blob, it will set it to a component state called BlobFile for future use.

const pickDocument = async () => {
    let result = await DocumentPicker.getDocumentAsync({})
if (result != null) {
      const r = await fetch(result.uri);
      const b = await r.blob();
      setFileName(result.name)
      setBlobFile(b)
      //setIsChoosed(true) 
    }
}

📝uploadFile

The codes for connect and upload the file into the firebase storage is written in this function, This should take the blob file as a argument which will then pass to the uploadBytesResumable function and other parameters are optional.

LINE A — specify the file location and get the reference to that storage.

LINE B — upload the blob file to that specified location in the firebase storage.

After completing the upload task the code segment start from LINE C will get a URL for that uploaded file. Basically you can take any specific actions with this uploadTask. So please feel free to read this Documentation to understand how we can customized it accordingly.

import { ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";
import { storage } from "./config";
export const UploadFile = (blobFile, fileName , isUploadCompleted) => {
    if (!blobFile) return;
    const sotrageRef = ref(storage, `myDocs/${fileName}`); //LINE A
    const uploadTask = uploadBytesResumable(sotrageRef, blobFile); //LINE B
uploadTask.on(
        "state_changed", null ,
        (error) => console.log(error),
        () => {
            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { //LINE C
                console.log("File available at", downloadURL);
                isUploadCompleted(true)
                return downloadURL
            });
}
    );
}

📋Conclusion

This short article explains how the developers can upload a document to the firebase storage using a react native mobile application. Although this article explains only the major functions involve in uploading a document, a complete sample react native project can be found in the above mentioned GitHub repository. Anyone who have a basic knowledge about react native will be able to understand and use the code segments in their own projects as well

Any corrections, suggestions, and comments are welcome ! Thank You.