Upload progress monitoring in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start an upload task using Firebase Storage.

Firebase

const uploadTask = storageRef.child('images/file.jpg').[1](file);

Drag options to blanks, or click blank then click option'

Aput

Bget

Cdelete

Dlist

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'put' to upload.

Trying to delete before uploading.

The put method uploads the file to Firebase Storage.

2fill in blank

medium

Complete the code to listen for upload progress updates.

Firebase

uploadTask.on('state_changed', snapshot => {
  const progress = (snapshot.bytesTransferred / snapshot.[1]) * 100;
  console.log('Upload is ' + progress + '% done');
});

Drag options to blanks, or click blank then click option'

Asize

BmaxBytes

CtotalBytes

DfullBytes

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'maxBytes' which does not exist.

Using 'size' which is not a snapshot property.

The totalBytes property gives the total size of the file being uploaded.

3fill in blank

hard

Fix the error in the code to correctly handle upload completion.

Firebase

uploadTask.on('state_changed', null, error => {
  console.error(error);
}, () => {
  console.log('Upload [1] successfully');
});

Drag options to blanks, or click blank then click option'

Astarted

Bcompleted

Cfailed

Dpaused

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'failed' which is for errors.

Using 'started' which is before upload.

The third callback runs when the upload is completed successfully.

4fill in blank

hard

Fill both blanks to calculate and log upload progress percentage.

Firebase

uploadTask.on('state_changed', snapshot => {
  const progress = (snapshot.[1] / snapshot.[2]) * 100;
  console.log(`Progress: ${progress.toFixed(2)}%`);
});

Drag options to blanks, or click blank then click option'

AbytesTransferred

BtotalBytes

CmaxBytes

DbytesUploaded

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'maxBytes' which is invalid.

Using 'bytesUploaded' which is not a snapshot property.

bytesTransferred is how many bytes uploaded so far, and totalBytes is the full size.

5fill in blank

hard

Fill all three blanks to handle upload states and log messages accordingly.

Firebase

uploadTask.on('state_changed', snapshot => {
  switch(snapshot.state) {
    case '[1]':
      console.log('Upload is running');
      break;
    case '[2]':
      console.log('Upload is paused');
      break;
    case '[3]':
      console.log('Upload is canceled');
      break;
  }
});

Drag options to blanks, or click blank then click option'

Arunning

Bpaused

Ccanceled

Dcompleted

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'completed' as a state in switch, which is handled differently.

Mixing up paused and canceled states.

The upload states are running, paused, and canceled to track progress.