Upload progress monitoring in Firebase - Mini Project: Build & Apply

Upload Progress Monitoring with Firebase Storage

📖 Scenario: You are building a web app that allows users to upload files to Firebase Storage. You want to show users how much of their file has uploaded in real time, so they know the progress.

🎯 Goal: Create a Firebase Storage upload process that tracks and displays the upload progress percentage.

📋 What You'll Learn

Initialize Firebase Storage reference for a file upload

Create a variable to hold the file to upload

Use the uploadBytesResumable method to start the upload

Add an event listener to track upload progress and update a progress variable

💡 Why This Matters

🌍 Real World

Uploading files with progress feedback is common in web apps like photo sharing, document management, and backups.

💼 Career

Understanding upload progress monitoring is essential for frontend and backend developers working with cloud storage services.

1

Set up the file to upload

Create a variable called file and assign it the value selectedFile which represents the file chosen by the user.

Firebase

# Create a variable called file and assign selectedFile
# Your code here

Need a hint?

Use const file = selectedFile; to hold the file object.

2

Create a Firebase Storage reference

Create a variable called storageRef and assign it the Firebase Storage reference for the path uploads/${file.name} using ref(storage, `uploads/${file.name}`).

Firebase

const file = selectedFile;
// Create a storageRef for uploads/${file.name}
# Your code here

Need a hint?

Use ref(storage, `uploads/${file.name}`) to create the storage reference.

3

Start the upload and track progress

Create a variable called uploadTask and assign it the result of uploadBytesResumable(storageRef, file). Then add an event listener on uploadTask for the 'state_changed' event. Inside the listener, calculate the upload progress percentage as (snapshot.bytesTransferred / snapshot.totalBytes) * 100 and assign it to a variable called progress.

Firebase

const file = selectedFile;
const storageRef = ref(storage, `uploads/${file.name}`);
// Start upload and track progress
# Your code here

Need a hint?

Use uploadBytesResumable to start the upload and uploadTask.on('state_changed', callback) to track progress.

4

Complete the upload progress monitoring

Inside the 'state_changed' event listener, add a console log statement that outputs the text Upload is ${progress}% done using a template literal. This will show the upload progress percentage in the console.

Firebase

const file = selectedFile;
const storageRef = ref(storage, `uploads/${file.name}`);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on('state_changed', (snapshot) => {
  const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  // Log upload progress
  # Your code here
});

Need a hint?

Use console.log(`Upload is ${progress}% done`); to show progress.