Search⌘ K
AI Features
Home
Courses
A Complete Guide to Firebase on the Web

Uploading Files to Storage

Explore how to upload files to Firebase Cloud Storage by creating storage references with the ref function and using the uploadBytes method. Understand how to handle file metadata and view uploaded files in the Firebase console, while learning about limitations in upload resumption.

We'll cover the following...

To carry out any operation on a Cloud Storage bucket, we must create a referenceA reference is a pointer to a file on our database. to the specific path of the file—including a file nam—within our bucket. To do this, we use the ref function imported from the firebase/storage subpackage. This function returns a storage reference to the location in the bucket that corresponds to the provided URL.

The ref function takes the storage instance as its first argument. As an optional second parameter, it can take a URL to the file to which the reference will point. However, if no URL is provided, the function returns a reference to the root of the Storage bucket.

Javascript (babel-node)
import { getStorage, ref } from "firebase/storage";
import { firebaseApp } from "../services/firebase";
const storage = getStorage(firebaseApp);
// reference to root of Cloud Storage bucket
const storageRef = ref(storage)
// reference to logo.png
const logoRef = ref(storage, "logo.png");
// reference to educative directory
const educativeRef = ref(storage, "educative");
// reference to educative/logo.png
const educativeLogoRef = ref(storage, "educative/logo.png");

Next, let’s begin uploading files to our bucket.

Simple file upload

The Firebase Storage SDK supports file uploads for various file formats including JavaScript File and Blob APIs, Uint8Array Byte Arrays, raw, base64, base64url, and data_url encoded strings. For this lesson, we’ll use the JavaScript File or Blob API for our uploads.

To upload a file via the Javascript Blob and File API, we use the uploadBytes function imported from the firebase/storage subpackage. This function takes a reference to where the data should be uploaded as its first parameter. It takes the data to upload as the second parameter. Finally, it has an optional third parameter that represents the metadata for the data to be uploaded. This metadata contains typical file properties such as name, contentType, and size of the file to be uploaded:

Javascript (babel-node)
import { getStorage, ref, uploadBytes } from "firebase/storage";
import { firebaseApp } from "../services/firebase";
const storage = getStorage(firebaseApp);
// reference to educative directory
const educativeRef = ref(storage, "images/logo.png");
export const fileUpload = (image) => {
  const metadata = {
    contentType: "image/png",
  };
  uploadBytes(educativeRef, image, metadata)
    .then((snapshot) => {
      alert("File uploaded successfully");
    })
    .catch((err) => {
      console.log(err);
    });
};

If we now go to the Firebase console and navigate to the “Storage” section, we can see the uploaded file in our Storage bucket.

Note: File uploads performed with the uploadBytes function are not resumable. Therefore, they can not be paused, resumed, or cancelled. To incorporate resumable uploads into our application, we must use the Firebase documentation.

Practice exercise

Study the highlighted lines in the widget below to learn how to upload files to a Firebase Cloud Storage bucket:

import React, { useRef } from "react";
import { fileUpload } from "../helpers/storage";

function AddTask() {
  const fileInput = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();

    fileUpload(fileInput.current.files[0]);
  };

  return (
    <div className="task-form">
      <div className="form-input">
        <form onSubmit={handleSubmit}>
          <input
            name="upload"
            type="file"
            ref={fileInput}
            accept="image/*,application/pdf"
            required
          />
          <label htmlFor="upload image" className="label-name">
            <span className="content-name">Choose image</span>
          </label>
          <br />
          <div className="btn">
            <button title="submit" aria-label="submit" type="submit">
              Upload image
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default AddTask;
Upload files to a Firebase Cloud Storage bucket

Steps to perform

  • Run the code in the widget above and open the output on a new tab using your unique Educative link.
  • Select an image from your local storage and click the “Upload image” button.
  • Head over to the “Storage” section of the Firebase console to view the image.

If you’re facing issues uploading images to the Storage bucket, you probably forgot to change your security rules as advised in the previous lesson. Revisit the lesson and make those changes to continue with the course.