Upload progress monitoring in Firebase - Step-by-Step Execution

Process Flow - Upload progress monitoring

Start Upload

↓

Upload Begins

↓

Listen to Progress Event

↓

Calculate % Uploaded

↓

Update Progress UI

↓

Upload Complete?

No→Continue Upload

Yes↓

Upload Finished

This flow shows how an upload starts, progress events are listened to, progress percentage is calculated and UI updated until upload finishes.

Execution Sample

Firebase

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

This code uploads a file and logs the upload progress percentage as it changes.

Process Table

Step	Event Triggered	bytesTransferred	totalBytes	Progress %	Action Taken
1	Upload starts	0	1000	0	Upload begins, progress 0%
2	state_changed	200	1000	20	Log 'Upload is 20% done'
3	state_changed	500	1000	50	Log 'Upload is 50% done'
4	state_changed	800	1000	80	Log 'Upload is 80% done'
5	state_changed	1000	1000	100	Log 'Upload is 100% done', upload complete

💡 Upload completes when bytesTransferred equals totalBytes (1000), progress reaches 100%

Status Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
bytesTransferred	0	200	500	800	1000	1000
totalBytes	1000	1000	1000	1000	1000	1000
progress	0	20	50	80	100	100

Key Moments - 2 Insights

Why does progress sometimes jump in big steps instead of smoothly increasing?

Progress updates depend on the 'state_changed' events from Firebase, which may fire irregularly as chunks upload. See execution_table rows 2-4 where progress jumps from 20% to 50% to 80%.

What happens if totalBytes is zero or unknown?

If totalBytes is zero, dividing by zero causes progress calculation issues. Firebase usually provides totalBytes, but if missing, progress can't be calculated properly. This is why totalBytes is tracked constant in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table, what is the progress % at step 3?

A 20%

B 80%

C 50%

D 100%

💡 Hint

Check the 'Progress %' column in execution_table row 3.

At which step does the upload complete?

A Step 4

B Step 5

C Step 3

D Step 2

💡 Hint

Look for when bytesTransferred equals totalBytes in execution_table.

If bytesTransferred was 400 at step 2 instead of 200, what would progress % be?

A 40%

B 20%

C 50%

D 80%

💡 Hint

Calculate (bytesTransferred / totalBytes) * 100 using variable_tracker values.

Concept Snapshot

Upload progress monitoring in Firebase:
- Use uploadTask.on('state_changed') to listen for progress
- Calculate progress as (bytesTransferred / totalBytes) * 100
- Update UI or log progress inside the event handler
- Upload completes when bytesTransferred equals totalBytes
- Progress events may fire irregularly, showing jumps

Full Transcript

This visual execution trace shows how Firebase upload progress monitoring works. The upload starts and triggers 'state_changed' events. Each event provides bytesTransferred and totalBytes. Progress percentage is calculated by dividing bytesTransferred by totalBytes and multiplying by 100. The progress is logged or shown in UI. The upload finishes when bytesTransferred equals totalBytes. The execution table tracks each step's bytesTransferred, totalBytes, and progress percent. Variable tracker shows how these values change over time. Key moments clarify why progress jumps and the importance of totalBytes. The quiz tests understanding of progress values at steps and calculations.

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