Upload progress monitoring in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

💻 Command Output

intermediate

What is the output of this Firebase upload progress code?

Consider this Firebase Storage upload snippet that tracks progress:

const uploadTask = storageRef.put(file);
uploadTask.on('state_changed', snapshot => {
  const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log(`Upload is ${progress}% done`);
});

What will be logged if 500 bytes are transferred out of 2000 bytes total?

Firebase

const snapshot = { bytesTransferred: 500, totalBytes: 2000 };
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(`Upload is ${progress}% done`);

A Upload is 100% done

B Upload is 50% done

C Upload is 75% done

D Upload is 25% done

💡 Hint

Calculate the percentage: (transferred / total) * 100.

500 bytes out of 2000 bytes is 25% progress.

❓ Troubleshoot

intermediate

Why does the Firebase upload progress event not fire?

A developer uses uploadTask.on('state_changed', ...) to track upload progress, but the callback never runs. What is the most likely cause?

A The file variable is undefined or null

B The Firebase Storage reference is missing a bucket name

C The network connection is too fast to detect progress

D The uploadTask variable is not assigned the result of <code>put()</code>

💡 Hint

Check if the file to upload is valid.

If the file is undefined or null, the upload never starts, so progress events don't fire.

❓ Configuration

advanced

Which Firebase Storage rule allows upload progress monitoring for authenticated users only?

Given this Firebase Storage security rule snippet, which option correctly restricts uploads to authenticated users and allows progress monitoring?

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      allow write: if ...;
    }
  }
}

A request.resource.size &lt; 1000000

B request.auth != null

C request.time &lt; timestamp.date(2020, 1, 1)

D request.auth == null

💡 Hint

Authenticated users have a non-null request.auth.

Allowing write only if request.auth != null restricts uploads to signed-in users, enabling secure progress monitoring.

🔀 Workflow

advanced

What is the correct sequence to monitor and handle Firebase upload progress and completion?

Order these steps correctly for uploading a file with progress monitoring and completion handling in Firebase Storage:

A 1,3,2,4

B 3,1,2,4

C 1,2,3,4

D 2,1,3,4

💡 Hint

First create reference, then start upload, then listen for progress, then handle completion.

You must create the reference before uploading. The upload starts with put(), then you attach listeners to track progress and completion.

✅ Best Practice

expert

Which approach best improves user experience during large file uploads in Firebase Storage?

For large file uploads, which method best improves user experience by providing accurate progress feedback and allowing upload pause/resume?

A Split the file manually into chunks and upload each chunk separately without pause support.

B Upload the file in one go without progress tracking to simplify code.

C Use <code>uploadTask.on('state_changed')</code> with pause() and resume() methods on uploadTask.

D Use a third-party library to upload files outside Firebase Storage.

💡 Hint

Firebase Storage uploadTask supports pause and resume natively.

Using uploadTask's built-in progress events and pause/resume methods provides smooth user feedback and control during large uploads.