Menu

How to upload images or files on Firebase Cloud Storage with Nextjs 14

In this tutorial, we will learn how to upload images or files on Firebase Cloud Storage with Nextjs 14.

Video Tutorial

You can watch the video tutorial for a better understanding.

{% youtube hrlmbRo1iOQ %}

What is Firebase Cloud Storage?

Firebase is a Backend-as-a-Service (BaaS) that provides a number of services like authentication, real-time database, cloud functions, and cloud storage is one of them. In cloud storage, you will be able to store media files like images, videos, pdfs and so on. Firebase storage works similary to local file system. You can create directories and store files in them. You can also nest directories inside other directories. Like local system, you also have path to the file in the cloud storage. I.E images/2022/01/01/my-image.png, videos/2022/01/01/my-video.mp4, etc.

I will use Nextjs but you can use any other frontend framework like React, Angular, Vue, etc.

Setup

I would recommend watching the video tutorial for a better understanding.

  1. Create a new project on Firebase.

  2. Create a new web app and copy the firebase configuration. Store that in a file config.js. Values should be on environment variables. Create a new storage reference using getStorage and export that.

    1import { initializeApp } from 'firebase/app'
    2import { getStorage } from 'firebase/storage'
    3

    4// Your web app's Firebase configuration
    5const firebaseConfig = {
    6    apiKey: 'AIzaSyCFZ6457rjJOFKLpd7b2HDSsc9hs1CUlVE',
    7    authDomain: 'firestorage-yt.firebaseapp.com',
    8    projectId: 'firestorage-yt',
    9    storageBucket: 'firestorage-yt.appspot.com',
    10    messagingSenderId: '372871883935',
    11    appId: '1:372871883935:web:bd07a58b0ff9c5ea5586aa',
    12}
    13

    14// Initialize Firebase
    15const app = initializeApp(firebaseConfig)
    16

    17const storage = getStorage(app)
    18

    19export { storage }

  3. Install the firebase package on Nextjs project.

  4. Create storage from the console and use the test mode

Upload Images or files

1import { useRef } from 'react'
2import { ref, uploadBytes } from 'firebase/storage'
3import { storage } from './config'
4

5const Uploader = () => {
6    const inputRef = useRef(null)
7

8    const handleUpload = async e => {
9        e.preventDefault()
10

11        const file = inputRef.current.files[0]
12

13        try {
14            const fileRef = ref(storage, `images/${file.name}`)
15            await uploadBytes(fileRef, file)
16        } catch (error) {
17            console.log(error)
18        }
19    }
20

21    return (
22        <div>
23            <form onSubmit={handleUpload}>
24                <input ref={inputRef} type='file' name='file' />
25                <button type='submit'>Upload</button>
26            </form>
27        </div>
28    )
29}

Explanation:

  1. Created a new form with an input field of type 'file'. Without the input field, we can't select the file from the local system.
  2. Pass a ref to the input field so that we can access the file.
  3. We get the file from inputRef.current.files[0]. The return should be an File object.
  4. Create a reference to the file in the cloud storage using ref.
  5. Use uploadBytes to upload the file to the cloud storage. There are many different format you can use for uploading. Like File, Blob, Uint8Array, etc. Check the docs

This is how you can upload images or files on Firebase Cloud Storage with Nextjs 14. To learn how to display upload progress, state or how to pause and resume the upload, check the video tutorial.

Shameless Plug

I also have firebase firestore series on my youtube channel. If you are interested, you can check that out.

{% youtube PoTUX9_3LaQ %}

If the blog has been helpful, please consider subscribe to my channel and drop a 💖. It will help me a lot.

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostHow to update documents in Firebase Firestore and Nextjs14
Next PostHow to add documents to firestore from Nextjs14 using Server component and Server action