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.

Practice

1. What does the state_changed event in Firebase Storage upload tasks help you monitor?

easy

A. The number of files in storage

B. The download speed of the file

C. The file size before upload

D. The progress of the file upload

Solution

1. Step 1: Understand the purpose of state_changed

   The state_changed event triggers updates during the upload process.

2. Step 2: Identify what is monitored

   This event provides progress updates, such as bytes transferred and total bytes.

3. Final Answer:

   The progress of the file upload -> Option D

4. Quick Check:

   Upload progress = state_changed event [OK]

Hint: Remember: state_changed tracks upload progress [OK]

Common Mistakes:

• Confusing upload progress with download speed
• Thinking it tracks file size before upload
• Assuming it counts files in storage

2. Which of the following is the correct way to attach a listener for upload progress in Firebase Storage using JavaScript?

easy

A. uploadTask.on('state_changed', progressCallback)

B. uploadTask.listen('progress', progressCallback)

C. uploadTask.addEventListener('upload', progressCallback)

D. uploadTask.track('state_change', progressCallback)

Solution

1. Step 1: Recall Firebase Storage upload syntax

   The method to listen for upload events is on with event name state_changed.

2. Step 2: Match correct method and event

   Only uploadTask.on('state_changed', progressCallback) is valid syntax.

3. Final Answer:

   uploadTask.on('state_changed', progressCallback) -> Option A

4. Quick Check:

   Use .on('state_changed') for progress [OK]

Hint: Use .on('state_changed') to monitor upload progress [OK]

Common Mistakes:

• Using non-existent methods like listen or track
• Wrong event names like 'progress' or 'upload'
• Confusing event listener syntax with DOM events

3. Given the following code snippet, what will be logged if 500 bytes out of 1000 bytes are uploaded?

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

medium

A. Upload is 0.5% done

B. Upload is 50% done

C. Upload is 500% done

D. Upload is 100% done

Solution

1. Step 1: Calculate progress percentage

   Progress = (500 / 1000) * 100 = 50%

2. Step 2: Understand console output

   The console logs: "Upload is 50% done".

3. Final Answer:

   Upload is 50% done -> Option B

4. Quick Check:

   Progress = bytesTransferred / totalBytes * 100 [OK]

Hint: Divide bytesTransferred by totalBytes, multiply by 100 [OK]

Common Mistakes:

• Confusing bytesTransferred with percentage
• Multiplying by 100 twice
• Using integer division without decimal

4. You wrote this code to monitor upload progress but it never logs anything:

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

What is the error?

medium

A. The event name should be 'state_changed', not 'state_change'

B. The callback function is missing a return statement

C. You must use uploadTask.addListener instead of on

D. The progress calculation formula is incorrect

Solution

1. Step 1: Check event name spelling

   The correct event name is 'state_changed', not 'state_change'.

2. Step 2: Understand impact of wrong event name

   Using wrong event name means callback never triggers, so no logs appear.

3. Final Answer:

   The event name should be 'state_changed', not 'state_change' -> Option A

4. Quick Check:

   Event name must be exact 'state_changed' [OK]

Hint: Check event spelling: 'state_changed' not 'state_change' [OK]

Common Mistakes:

• Misspelling event names
• Expecting logs without callback firing
• Confusing method names like addListener vs on

5. You want to display upload progress as a percentage and also show a message when upload completes. Which code snippet correctly implements this using Firebase Storage's state_changed event?

hard

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

B. uploadTask.on('state_changed', snapshot => {
console.log('Upload complete!');
});

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

D. uploadTask.on('state_changed', () => {
console.log('Upload is done');
});

Solution

1. Step 1: Use correct event and callbacks

   The state_changed event accepts three callbacks: progress, error, and completion.

2. Step 2: Verify progress calculation and completion message

   uploadTask.on('state_changed', snapshot => { const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log(`Upload is ${progress}% done`); }, error => { console.error(error); }, () => { console.log('Upload complete!'); }); calculates progress and logs completion correctly; others miss callbacks or use wrong event.

3. Final Answer:

   uploadTask.on('state_changed', snapshot => { const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log(`Upload is ${progress}% done`); }, error => { console.error(error); }, () => { console.log('Upload complete!'); }); -> Option C

4. Quick Check:

   Use three callbacks with 'state_changed' event [OK]

Hint: Use three callbacks with 'state_changed' for progress and completion [OK]

Common Mistakes:

• Using wrong event names like 'progress'
• Missing completion callback
• Logging completion inside progress callback