2.3.2: Firebase Storage
- 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
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.
- 1.Note how
refsyntax is the same as with Realtime Database, but our files are stored in Firebase Storage, not Realtime Database.
uploadBytesmakes uploading files easy. We will see how uploading files becomes more complex when using our own backend in Module 3.
- 2.Note that
uploadBytesreturns a JS promise because we cannot be sure how long it will take for a file to finish uploading. Firebase examples use
.thensyntax 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.
getDownloadURLfunction 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.
- 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
- 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.
- 1.We will most likely not be using
listAllfunctions 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.
- 1.If we happen to get a Firebase Storage error we can check the error code in the error object in the promise
.catchblock to verify what happened.
Firebase Storage Storing files
Firebase Storage Displaying files
Please checkout the finished code in this repository, ensure that you're on the
storagebranch. 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.envwithin the application to create an
.envfile 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 installafter the installation you can then run the application with the command