Deleting files in Firebase - Mini Project: Build & Apply

Deleting files in Firebase Storage

📖 Scenario: You are managing a Firebase Storage bucket for a photo-sharing app. Sometimes users want to delete their uploaded photos to free up space.

🎯 Goal: Build a Firebase Storage script that deletes a specific file from the storage bucket.

📋 What You'll Learn

Create a Firebase Storage reference to a file path

Set a variable for the file path to delete

Use the Firebase Storage delete() method to remove the file

Handle success and error cases properly

💡 Why This Matters

🌍 Real World

Deleting files is common in apps where users upload content, like photos or documents, to manage storage space and privacy.

💼 Career

Knowing how to delete files in cloud storage services like Firebase is essential for backend and full-stack developers managing user data.

1

Set up Firebase Storage reference

Create a variable called storage and set it to firebase.storage() to access Firebase Storage.

Firebase

# Create a variable called storage and set it to firebase.storage()
# Your code here

Hint

Use firebase.storage() to get the storage service.

2

Set the file path to delete

Create a variable called filePath and set it to the string 'images/userPhoto.jpg' which is the path of the file to delete.

Firebase

const storage = firebase.storage();
# Create a variable called filePath and set it to 'images/userPhoto.jpg'
# Your code here

Hint

Use a string with the exact file path inside quotes.

3

Create a reference to the file

Create a variable called fileRef and set it to storage.ref(filePath) to get a reference to the file to delete.

Firebase

const storage = firebase.storage();
const filePath = 'images/userPhoto.jpg';
# Create a variable called fileRef and set it to storage.ref(filePath)
# Your code here

Hint

Use storage.ref(filePath) to get the file reference.

4

Delete the file with success and error handling

Call fileRef.delete() and add .then() to handle success with a function that logs 'File deleted successfully'. Add .catch() to handle errors with a function that logs 'Error deleting file:' and the error.

Firebase

const storage = firebase.storage();
const filePath = 'images/userPhoto.jpg';
const fileRef = storage.ref(filePath);
# Use fileRef.delete() with then() and catch() to handle success and error
# Your code here

Hint

Use fileRef.delete() with then() and catch() for promise handling.

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