Deleting files in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to delete a file from Firebase Storage.

Firebase

const storageRef = firebase.storage().ref();
storageRef.child([1]).delete();

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

A'path/to/file.txt'

BdeleteFile()

CstorageRef

Dfirebase.delete()

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function call instead of a string for the file path.

Not using quotes around the file path.

You need to specify the file path as a string inside child() to delete that file.

2fill in blank

medium

Complete the code to handle the promise returned by the delete operation.

Firebase

storageRef.child('path/to/file.txt').delete().[1](() => {
  console.log('File deleted successfully');
});

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

Athen

Bcatch

Cfinally

Dresolve

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch() instead of then() for success.

Using resolve() which is not a method on promises.

The delete() method returns a promise. Use then() to run code after successful deletion.

3fill in blank

hard

Fix the error in the code to properly catch errors during file deletion.

Firebase

storageRef.child('path/to/file.txt').delete().then(() => {
  console.log('Deleted');
}).[1]((error) => {
  console.error('Error:', error);
});

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

Athen

Berror

Cfinally

Dcatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using then() twice instead of catch().

Using a non-existent error() method.

Use catch() to handle errors from the promise returned by delete().

4fill in blank

hard

Fill both blanks to delete a file and log success or error messages.

Firebase

storageRef.child([1]).delete().[2](() => {
  console.log('File deleted');
}).catch((error) => {
  console.error('Delete failed:', error);
});

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

A'images/photo.png'

Bthen

Ccatch

D'docs/report.pdf'

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then for success handling.

Not using quotes around the file path.

Specify the file path as a string in child() and use then() to handle success.

5fill in blank

hard

Fill all three blanks to delete a file, handle success, and handle errors properly.

Firebase

const fileRef = storageRef.child([1]);
fileRef.delete().[2](() => {
  console.log([3]);
}).catch((error) => {
  console.error('Failed:', error);
});

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

A'backup/data.zip'

Bthen

C'File deleted successfully'

Dcatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then for success.

Not using quotes around strings.

Logging an error message on success.

Use the file path string for child(), then() for success, and a success message string inside console.log.

Practice

1. What does the deleteObject function do in Firebase Storage?

easy

A. It creates a new folder in Firebase Storage.

B. It uploads a new file to Firebase Storage.

C. It reads the contents of a file in Firebase Storage.

D. It deletes a file from Firebase Storage.

Solution

1. Step 1: Understand the purpose of deleteObject

   The deleteObject function is designed to remove files from Firebase Storage.

2. Step 2: Compare with other functions

   Uploading files uses uploadBytes, reading uses getDownloadURL, and folders are virtual, not created by deleteObject.

3. Final Answer:

   It deletes a file from Firebase Storage. -> Option D

4. Quick Check:

   deleteObject removes files = A [OK]

Hint: Remember: deleteObject means remove file [OK]

Common Mistakes:

• Confusing deleteObject with upload functions
• Thinking deleteObject creates folders
• Assuming deleteObject reads file content

2. Which of the following is the correct syntax to delete a file named image.png from Firebase Storage using JavaScript?

easy

A. storage.delete('image.png');

B. await deleteFile('image.png');

C. await deleteObject(ref(storage, 'image.png'));

D. deleteObject('image.png');

Solution

1. Step 1: Identify correct function and parameters

   The deleteObject function requires a reference to the file, created by ref(storage, 'filename').

2. Step 2: Check syntax correctness

   await deleteObject(ref(storage, 'image.png')); correctly uses await deleteObject(ref(storage, 'image.png'));. Other options use incorrect functions or missing references.

3. Final Answer:

   await deleteObject(ref(storage, 'image.png')); -> Option C

4. Quick Check:

   Use ref() with deleteObject = C [OK]

Hint: Use ref() to locate file before deleteObject [OK]

Common Mistakes:

• Calling deleteObject without ref()
• Using non-existent deleteFile function
• Omitting await for async deleteObject

3. Consider this code snippet:

const fileRef = ref(storage, 'docs/report.pdf');
try {
  await deleteObject(fileRef);
  console.log('File deleted');
} catch (error) {
  console.log('Error:', error.message);
}

What will be printed if the file docs/report.pdf does not exist?

medium

A. 'File deleted'

B. 'Error: File not found'

C. No output

D. SyntaxError

Solution

1. Step 1: Understand deleteObject behavior on missing file

   If the file does not exist, deleteObject throws an error caught by the catch block.

2. Step 2: Check catch block output

   The catch block logs the error message, which typically indicates the file was not found.

3. Final Answer:

   'Error: File not found' -> Option B

4. Quick Check:

   Missing file causes error message = B [OK]

Hint: Missing file triggers catch error message [OK]

Common Mistakes:

• Assuming deleteObject silently succeeds if file missing
• Expecting no output on error
• Confusing error message with syntax error

4. Identify the error in this code snippet that tries to delete a file:

const fileRef = ref('storage', 'photos/pic.jpg');
deleteObject(fileRef).then(() => {
  console.log('Deleted');
}).catch(error => {
  console.error(error);
});

medium

A. The ref function is called with wrong arguments.

B. deleteObject should not use promises.

C. Missing await keyword before deleteObject.

D. The file path should not include folders.

Solution

1. Step 1: Check ref function usage

   The ref function requires the storage instance as the first argument, not the string 'storage'.

2. Step 2: Validate other parts

   Using promises with then and catch is valid. Await is optional here. File paths can include folders.

3. Final Answer:

   The ref function is called with wrong arguments. -> Option A

4. Quick Check:

   ref() needs storage instance, not string = A [OK]

Hint: ref() needs storage object, not string 'storage' [OK]

Common Mistakes:

• Passing string 'storage' instead of storage object
• Thinking await is mandatory with promises
• Believing file paths cannot have folders

5. You want to delete multiple files in Firebase Storage: file1.txt, file2.txt, and file3.txt. Which approach correctly deletes all files and logs 'All deleted' only after all deletions succeed?

hard

A. Use Promise.all with deleteObject calls for each file reference.

B. Call deleteObject sequentially without waiting for promises.

C. Use a for loop with deleteObject but no await or Promise.all.

D. Delete only the first file; others delete automatically.

Solution

1. Step 1: Understand asynchronous deletion

   Each deleteObject returns a promise. To wait for all deletions, use Promise.all.

2. Step 2: Check other options

   Sequential calls without waiting may not complete before logging. For loop without await or Promise.all won't wait. Files do not delete automatically.

3. Final Answer:

   Use Promise.all with deleteObject calls for each file reference. -> Option A

4. Quick Check:

   Promise.all waits for all deletes = D [OK]

Hint: Use Promise.all to wait for multiple deletes [OK]

Common Mistakes:

• Not waiting for all delete promises
• Assuming deleting one file deletes others
• Ignoring asynchronous nature of deleteObject