How to Create Image Uploader App with React and Firebase

6 min readApr 18, 2021

This article explains how to use Firebase in React to upload image files.

1. Create a Firebase Project

First thing first, let’s create a firebase project.

Second, let’s create your react app.

Third, create firebase storage on your project.

Go to Storage from the sidebar, then click “Get started”.
You will see a pop-up about rules. Click “Next” to continue.
Select a location for Cloud Storage. Note that the location cannot be changed later, but for now, you may select the closest location.
Go to Rules. Default is if request.auth != null; but you may change it to if true; for the testing. We should be able to authenticate the user before writing the upload process but to test the upload process, we will allow anyone to upload without authentication.

Next, let’s go back to the top page.

Add a web app.
Name your app. Check “Also set up Firebase Hosting for this app”.
You’ll need Firebase SDK Config so don’t need to copy it. You can check SDK Config later.
Install Firebase CLI. You may type npm install -g firebase-tools on your terminal. You might have used Firebase before, in this case, you can check the version with npm info firebase-tools version.
Deploy to Firebase Hosting. It is a little bit confusing part. So I’ll write it down in detail.

I’ve already installed firebase-tools, so just checked the version.

Once you are done installing “firebase-tools”, you may type this.

firebase login

After you successfully logged in, you may type this.

firebase init

Then you will see this.

You will be asked some questions. First, select “Hosting” and “Storage”.

Second, this is about project setup. Select “Use an existing project”, and choose the project that you created in the beginning.

Third, this is about hosting setup.

? What do you want to use as your public directory? (public)

Enter build

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Enter No

? Set up automatic builds and deploys with GitHub?

Either is fine. I entered no in this time.

Lastly, this is about storage setup.

? What file should be used for Storage Rules? (storage.rules)

Enter just enter key.

Now you’re done!

Let’s get back to your code editor.

To use firebase in React app, install the firebase package. You may type npm install firebase. Once you finish installing, you can check in package.json.

Do you remember I wrote you can check SDK Config later in section 4? Now the time to check the SDK config!

Create a directory named “firebase” in the src directory.
Create a file named “firebase.js” in the firebase directory.
In firebase.js, you may write like this.
Go to the firebase console, and check your SDK config from “Project Setting”. Then go to “Firebase SDK snippet”, and select “Config”.
Let’s get back to your code editor. Create a file named “.env” in your app directory. (Same place as where package.json in.)
In .env, you may write like this. I hid my config SDK for privacy's sake, but you will write your config SDK from the firebase console.
If you want to push this app on GitHub, make sure to add the “.env” in the “.gitignore” file.

The setting part is almost done. Let’s create a form!

Open App.js and delete unnecessary code. You could delete the code inside the orange square.
Import React, useState, firebase, and storage.
Create a form inside <div className="App></div>.
Create two useState, one is about the image, another is about the URL.
Create event handle functions. Create “onSubmit” and “onChange”.
Create a function to get a URL of firebase storage.