Firebase Storage

Add to favorites

Enable Firebase Storage in your application to store photos or videos from users

Advanced React Hooks Handbook

Intro to Firebase

6:59

Firebase Auth

11:59

Firestore

10:51

Firebase Storage

6:40

Serverless Email Sending

10:02

Geocoding with Mapbox

9:24

Contentful Part 1

4:59

Contentful Part 2

8:52

Gatsby and Shopify Part 1

5:20

Gatsby and Shopify Part 2

13:21

Gatsby and Shopify Part 3

14:32

Creating Stripe Account and Product

5:18

Adding Stripe.js to React

5:54

Stripe Checkout Client Only

18:18

PayPal Checkout

31:21

CodeSandbox link

You can find the full code for this tutorial at https://codesandbox.io/s/firebase-storage-570di.

Setup Firebase

Make sure that you have Firebase set up in your React project. If you haven't, you can set it up by reading the section Intro to Firebase of this handbook.

Enable Firebase Storage

Next, head to the Firebase Console and click on your project. To enable Firebase Storage in your project, under the Build dropdown menu, click on Storage. On the banner, click on Get started.

Screen Shot 2021-03-19 at 1.09.12 PM

Under the Rules tab, you'll need to edit your Storage rules to allow uploading pictures. We'll change it to true by default for now - remember to change them back to stronger rules before releasing your app - and click on Publish.

Nice, you just enabled Firebase Storage!

Create your input

Now, head back to your React project and let's create our input so users can upload their photos. This input will only accept png, jpg and jpeg files.

// UploadButton.js

import React from "react";

const UploadButton = () => {
    return (
        <div>
            <input type="file" accept=".png, .jpg, .jpeg" />
        </div>
    );
};

export default UploadButton;

The result will be a default HTML button like this:

On click of this button, a window will pop up and the user will be able to choose a picture from their computer.

Add styling

To style it up a bit, we'll create another button and hide the default HTML one. Then, we'll perform some JavaScript functions when the user will click on our custom button, to click on this default HTML button.

Create your custom button.

// MyCustomButton.js

import React from "react";
import styled from "styled-components";

const MyCustomButton = (props) => {
    return <Button onClick={props.onClick} >Upload a picture</Button>;
};

export default MyCustomButton;

const Button = styled.button`
    background: linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%);
    padding: 12px 0;
    width: 200px;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
    font-family: Segoe UI, sans-serif;
    cursor: pointer;

    :focus {
        outline: none;
    }
`;

Import MyCustomButton in UploadButton.js and call it in the return body.

// UploadButton.js

import MyCustomButton from "./MyCustomButton";

// UploadButton.js

const UploadButton = () => {
    return (
        <div>
            <MyCustomButton />
            <input type="file" accept=".png, .jpg, .jpeg" hidden />
        </div>
    );
};

Hide the default HTML button by adding the hidden attribute in the input.

// UploadButton.js

<input type="file" accept=".png, .jpg, .jpeg" hidden />

Create a useRef and add the ref to the input. Read the section useRef Hook from this handbook to learn more about it.

// UploadButton.js

import React, { useRef } from "react";
import MyCustomButton from "./MyCustomButton";

const UploadButton = () => {
    const ref = useRef(null);

    return (
        <div>
            <MyCustomButton />
            <input type="file" accept=".png, .jpg, .jpeg" hidden ref={ref} />
        </div>
    );
};

export default UploadButton;

Next, we'll create a function that will be fired when the user clicks on MyCustomButton. In this function, if the input exists, we are programmatically clicking on it at the same time the user clicks on MyCustomButton.

// UploadButton.js

const handleClick = () => {
    if (ref) {
      ref.current.click();
    }
};

Add your function onClick of MyCustomButton.

// UploadButton.js

<MyCustomButton onClick={() => handleClick()} />

On click of MyCustomButton, a window will pop up and the user will be able to select their photo from their computer.

Call Firebase Storage

Now that our basic user flow works, we can call Firebase Storage.

Import getFirebase from firebase.js.

// UploadButton.js

import getFirebase from "./firebase"

Create a Firebase instance.

// UploadButton.js

const firebase = getFirebase()

Create a new function uploadPicture() that will call Firebase Storage and upload the user's picture.

// UploadButton.js

const handleUpload = async (event) => {
    if (!firebase) return;

    const uploadedFile = event?.target.files[0];
    if (!uploadedFile) return;

    const storage = firebase.storage();
    const storageRef = storage.ref("images");

    try {
      await storageRef.child(uploadedFile.name).put(uploadedFile);
      alert("Successfully uploaded picture!");
    } catch (error) {
      console.log("error", error);
    }
};

In the function above, we are making sure that Firebase exists. Then, we are checking if we have our uploaded file. Next, we create a Firebase storage instance and a storage reference. Finally, we try to upload our file. If the upload is successful, an alert will show. If not, the error will be printed on the console.

In your input, add the onChange attribute and call the handleUpload function.

// UploadButton.js

<input
		type="file"
		ref={ref}
		accept=".png, .jpg, .jpeg"
		hidden
		onChange={handleUpload}
/>

Test everything!

Now it's time to test everything! Click on the Upload a picture button, select your image and upload it! If you get the following alert, congratulations! Your file has been uploaded to Firebase Storage.

You can also head over to Firebase Console and see if your file has been successfully uploaded under the images folder.

Final code

Here is the final code of the UploadButton file:

// UploadButton.js

import React, { useRef } from "react";

import getFirebase from "./firebase";
import MyCustomButton from "./MyCustomButton";

const UploadButton = () => {
    const firebase = getFirebase();
    const ref = useRef(undefined);

    const handleClick = () => {
        if (ref) {
            return ref.current?.click();
        }
    };

    const handleUpload = async (event) => {
        if (!firebase) return;

        const uploadedFile = event?.target.files[0];
        if (!uploadedFile) return;

        const storage = firebase.storage();
        const storageRef = storage.ref("images");

        try {
            await storageRef.child(uploadedFile.name).put(uploadedFile);
            alert("Successfully uploaded picture!");
        } catch (error) {
            console.log("error", error);
        }
    };

    return (
        <div>
          <MyCustomButton onClick={() => handleClick()} />
          <input
            type="file"
            ref={ref}
            accept=".png, .jpg, .jpeg"
            hidden
            onChange={handleUpload}
          />
        </div>
    );
};

export default UploadButton;

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Firestore

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Browse all downloads

Intro to Firebase

Learn about Firebase and set it up in your React project

6:59

Firebase Auth

Set up authentication in your React application using Firebase Auth

11:59

Firestore

Enable Firestore as your database in your React application

10:51

Firebase Storage

Enable Firebase Storage in your application to store photos or videos from users

6:40

Serverless Email Sending

Use EmailJS to send an email without backend

10:02

Geocoding with Mapbox

Create an address autocomplete with Mapbox's Geocoding API

9:24

Contentful Part 1

Create a Contentful account, add a model and content

4:59

Contentful Part 2

How to use the Content Delivery API to fetch data from Contentful

8:52

Gatsby and Shopify Part 1

Create a Shopify store, generate a password and add products to the store

5:20

Gatsby and Shopify Part 2

Connect Shopify to Gatsby and display all products

13:21

Gatsby and Shopify Part 3

Create a seamless checkout experience with Shopify and Gatsby

14:32

Creating Stripe Account and Product

Start integrating with Stripe and set up an account, product and price

5:18

Adding Stripe.js to React

Loading Stripe.js library to your React client application

5:54

Stripe Checkout Client Only

Accept payment with Stripe Checkout without backend

18:18

PayPal Checkout

Integrate online payment with PayPal

31:21

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Stephanie Diep

iOS and Web developer

Developing web and mobile applications while learning new techniques everyday

7 courses - 36 hours

Build Quick Apps with SwiftUI

Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch

11 hrs

Advanced React Hooks Handbook

An extensive series of tutorials covering advanced topics related to React hooks, with a main focus on backend and logic to take your React skills to the next level

3 hrs

SwiftUI Concurrency

Concurrency, swipe actions, search feature, AttributedStrings and accessibility were concepts discussed at WWDC21. This course explores all these topics, in addition to data hosting in Contentful and data fetching using Apollo GraphQL

3 hrs

SwiftUI Combine and Data

Learn about Combine, the MVVM architecture, data, notifications and performance hands-on by creating a beautiful SwiftUI application

3 hrs

SwiftUI Advanced Handbook

An extensive series of tutorials covering advanced topics related to SwiftUI, with a main focus on backend and logic to take your SwiftUI skills to the next level

4 hrs

React Hooks Handbook

An exhaustive catalog of React tutorials covering hooks, styling and some more advanced topics

5 hrs

SwiftUI Handbook

A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques

7 hrs