Firebase Database and Storage

How to use Firebase Storage and Firebase Database with React?

Hello 👋🏼, let's continue with the Firebase series by learning how to work with the Storage and the Database. We'll create a simple shopping cart to sell cups with an admin form to illustrate how to upload images and retrieve them from the database with their corresponding product. We'll continue to work with React, TypeScript, and Tailwind CSS.
Let's start!

Initialize Firebase Database and Storage for Web Apps.

Go to the Build section on the left side of the screen, provision the Storage and the Database set it all in testing mode. Then, go to the rules tab and add the following rules. Follow Get Started with Cloud Storage on Web and Get Started with Cloud Firestore if you need extra help.

  • Storage Rules.
storage rules
rules_version = '2'; service { match /b/{bucket}/o { match /{images}/{imageName} { allow read; allow write: if // Public access for development purposes. // Allow 5 MB image or less. request.resource.size < 5 * 1024 * 1024 && request.resource.contentType.matches('image/.*'); } } }
  • Firestore Database Rules.
firestore database rules
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{store}/{productId} { // Public access for development purposes. allow read, write; } } }
  • Create a React Typescript project with Vite and install Firebase.
Git Bash
npm create vite@latest file-upload-tutorial -- --template react-ts && cd file-upload-tutorial && npm install firebase

How to upload images to the Firebase storage?

After setting up the React project, we'll code the admin form and the Firebase file. First, create the utils folder, and inside create firebase.ts.

Git Bash
cd src mkdir utils && cd utils touch firebase.ts
  • Insert the following code in the firebase.ts file. Don't forget to add your Firebase config keys!
  • Create the components folder and inside create adminForm.tsx. For the CSS styling, I'm using Tailwind CSS.
Git Bash
cd src mkdir components && cd components touch adminForm.tsx

As you can notice the file upload input is separated from the other input elements because it targets a different object called FileList. Extract from the FileList the name and the complete object. Send them as attributes to the uploadProduct() function.

  • Bring the form to the App.tsx

After uploading your first image, go to Firebase and check that the images folder is in the storage and the database has the product with the image URL.

How to get the shopping cart products from the Firebase database?

Now that you can upload images and data, it's time to retrieve it. Go to the firebase.ts file and add the following code. Notice that we're importing DocumentData[] type from Firebase.

  • Create two more components productCards.tsx and productCardInfo.tsx.
Git Bash
cd components touch productCards.tsx && touch productCardInfo.tsx

Copy the following code into the productCards.tsx; this component is in charge of fetching the database and showing a grid of products.


Our second component is the productCardInfo.tsx; this component displays the inside of the card with the product information.

  • Bring the two components to the App.tsx, refresh the browser, and you should see the products!

Add the React Context for dynamic product fetching.

Right now, the products appear on the screen when you refresh the web page; this is totally fine for a shopping store; however, if you want to display the products dynamically when hitting the submit button, you need to create a Context. Every time the getProducts() function is called the Context will instruct the product card component to re-render showing the latest product you added to the database.

  • First, create a context folder, and inside create products-context.tsx.
Git Bash
cd src mkdir context && cd context touch products-context.tsx
  • Copy the following code inside the products-context.tsx
  • Add the Context to the main.tsx
  • Called the setProducts() function in the Admin form.

Delete the product state and the useEffect(); now you can display the products dynamically using the Context, see you next time!