How does Firebase Cloud Storage work and how do you upload files with progress tracking?

Explanation & Concept

Cloud Storage for Firebase stores user-generated content such as images, audio, and videos in Google Cloud Storage buckets. The SDK supports resumable uploads that automatically resume after network drops.

Code Example

javascript

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage();
const fileRef = ref(storage, `avatars/${userId}.jpg`);
const uploadTask = uploadBytesResumable(fileRef, file);

uploadTask.on("state_changed", 
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log(`Upload is ${progress.toFixed(1)}% done`);
  }, 
  (error) => console.error("Upload error:", error), 
  async () => {
    const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
    console.log("File available at:", downloadURL);
  }
);

How It Works & Key Takeaways

`uploadBytesResumable` emits real-time progress events and recovers automatically if connectivity fluctuates during large media uploads.

Mock Test · 1 Questions · Optional

Ready for Firebase Cloud Messaging (Push)?

Take a quick test to evaluate yourself, or move straight to the next module.

Intermediate1 questions

Skip