2.3.2: Firebase Storage

Learning Objectives

1. Firebase Storage allows us to store and retrieve user-generated files on the cloud

2. How to set up and use Firebase Storage with a React app

Introduction

Firebase Storage is a convenient tool to store and retrieve user-generated files. Source: Firebase

Firebase Storage is a cloud file storage system that allows us to store and retrieve user-generated files on behalf of our app's users. It allows us to upload user-generated files to Firebase with API calls directly from our frontends and save the locations of those files in our database for easy retrieval.

Start by reading the official Firebase Storage tutorials linked below. We will skip the Get Started page and come back to it when working on the relevant exercise.

Create a Reference

1. Note how ref syntax is the same as with Realtime Database, but our files are stored in Firebase Storage, not Realtime Database.

Upload Files

1. uploadBytes makes uploading files easy. We will see how uploading files becomes more complex when using our own backend in Module 3.

2. Note that uploadBytes returns a JS promise because we cannot be sure how long it will take for a file to finish uploading. Firebase examples use .then syntax to perform logic after promises resolve.

3. Rocket does not require we implement features to show upload progress to users, but that would be a nice touch for Comfortable exercises.

4. getDownloadURL function returns a JS promise that resolves to a URL for us to download the file we just uploaded. We will save each file's download URL to our database.

Download Files

1. No need to worry about CORS Configuration for now unless we plan to have our users download files to their local drives from the browser

Delete Files

1. Rocket recommends waiting until the promise returned by deleteObject (and any other file upload/download/modifying functions) resolves before updating local state and UI.

List Files

1. We will most likely not be using list and listAll functions to retrieve files in our apps, because we will save each file's download URL in our database and retrieve those URLs when loading those files in our apps.

2. No need to implement pagination when using Firebase Storage for the first time. We can implement it as a Comfortable exercise.

Handle Errors

1. If we happen to get a Firebase Storage error we can check the error code in the error object in the promise .catch block to verify what happened.

Sample Implementation Legacy (Class based)

Firebase Storage Storing files

Note there has been a slight change within React, at minute 6:22, there should be a code alteration, line 76, the new value should be e.target.value , and not 'e.target.file'. Please make this amendment if you are following this video!

Firebase Storage Displaying files

Please checkout the finished code in this repository, ensure that you're on the storage branch. If you want to test out the application on your machine you will need to have registered an Application on Firebase with Realtime Database and Storage activated. Use the sample.env within the application to create an .env file with your Firebase credentials. With this in mind if you want to run the application on your machine you will need to install the dependencies with the command npm install after the installation you can then run the application with the command npm run dev. Then open a browser of your choice and navigate to http://localhost:5173.