Uploading files to Firebase Storage using React

Firebase Cloud Storage is designed to help quickly and easily store and serve user-generated content, such as photos and videos.

---

By the end of this post you will learn how to :

• Create and setup a firebase account
• Add your app to firebase
• Create Storage space in firebase
• Setup policies for storage access
• Upload photos using React Application

What you should already know

• Familiarity with writing React

Firebase Setup

We will setup the Firebase in three steps:

1. Firebase Account Creation
2. Creation of a new Project
3. Storage & Policy Setup
4. Coping configurations for connection

---

- Firebase Account Creation:

To create Firebase account go to https://firebase.google.com/, you can sign in using the Google Account. Once logged in open the console using Go to console link or open https://console.firebase.google.com/

- Creation of a new Project

You will have an option to add a project:

Provide the required details to create a new project

Set Google Analytics, for this demo we don't need this.

Once you click on Create Project, in a few seconds project will be ready to use.

- Storage & Policy Setup

Click on Storage

Click on Get Started.
Firebase will request you to select the security rules, if you are using this for development purposes you can select the Test mode which will allow you to access the data without authentication. For this demo, we will use Test mode. ( This is not recommended for production environments.)

Select the region where you want to store the files:

After a few seconds, your storage space will be ready.

- Coping configurations for connection

Firebase is all setup now we just have to copy the firebase config which will be required to connect to storage from react application. For this go to project overview and now we have to add an application to this project.

Click on Web App, choose a name and register app.

You will be presented with the steps to use Firebase in Web Project. Copy it and save it for later use.

---

Create React App

Let's now start with building our React Application, you can refer https://reactjs.org/docs/create-a-new-react-app.html to create a basic structure of React App.

• Install firebase dependency using below command: npm install firebase

• Now, we will import the Firebase configs to the project. Create a file src\config\firebase.js . Import the Firebase components in this file
  import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

• Copy the firebase config object we copied from firebase console and export storage constant
  export const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);

  This storage variable will allow us to upload and download the files in firebase storage.

• In App component or any subcomponent create a Input type file and a button to upload file:
  <input type="file" onChange={onFileChange} />
<button onClick={onFileUpload}>Upload!</button>

For writing the process for uploading the files to we need to import the storage variable and few components from firebase library.

import { ref, uploadBytesResumable, getDownloadURL } from '@firebase/storage';
import { storage } from '../config/firebase';

• On button's click even we will create a storage reference which will hold the storage and file location at firebase server.

const storageRef = ref(storage,/files/${file.name});

• We will use uploadBytesResumable to upload the file and getDownloadURL to get the URL from server by which we can download/view the uploaded file. uploadBytesResumable will return UploadTask which represents the process of uploading an object. It also allows you to monitor and manage the upload.

const uploadTask = uploadBytesResumable(storageRef, file);

The event state_changed can be used to manage the upload and view the current state.

• Now we are all done start the application and try uploading file.

Github:

You can refer the code here : https://github.com/ashusharmatech/react-firebase-storage-demo