Uploading files in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What happens when you upload a file with the same name to Firebase Storage?

You upload a file named image.png to Firebase Storage. Then you upload another file with the same name image.png to the same location. What is the result?

A The new file overwrites the existing file silently.

B Firebase Storage creates a new file with a unique name to avoid overwriting.

C The upload fails with an error about duplicate file name.

D Both files are stored and Firebase Storage merges their contents.

💡 Hint

Think about how cloud storage usually handles files with the same path.

Firebase Storage treats files by their full path. Uploading a file with the same path overwrites the existing file silently.

❓ security

intermediate

Which Firebase Storage security rule allows only authenticated users to upload files?

Choose the Firebase Storage security rule snippet that restricts file uploads to authenticated users only.

Firebase

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow write: if <condition>;
    }
  }
}

A request.auth == null

B resource.size < 1048576

C request.time < timestamp.date(2025, 1, 1)

D request.auth != null

💡 Hint

Authenticated users have a non-null request.auth object.

The condition request.auth != null ensures only signed-in users can write (upload) files.

❓ Configuration

advanced

What is the correct way to get a download URL after uploading a file in Firebase Storage using JavaScript?

After uploading a file to Firebase Storage, you want to get its public download URL. Which code snippet correctly does this?

Firebase

import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';

const storage = getStorage();
const storageRef = ref(storage, 'files/myFile.txt');

// Assume file is a File object from input
uploadBytes(storageRef, file).then((snapshot) => {
  // What goes here?
});

A getDownloadURL(snapshot.ref).then(url => console.log(url));

B storageRef.getDownloadURL().then(url => console.log(url));

C snapshot.downloadURL.then(url => console.log(url));

D uploadBytes.getDownloadURL(storageRef).then(url => console.log(url));

💡 Hint

Look at the Firebase Storage API for getting download URLs after upload.

The uploadBytes returns a snapshot with a ref property. Use getDownloadURL(snapshot.ref) to get the URL.

❓ Architecture

advanced

Which Firebase Storage architecture best supports large file uploads with resume capability?

You want to allow users to upload large files that can resume if interrupted. Which Firebase Storage upload method supports this?

A Split the file manually and upload parts with <code>uploadBytes()</code>.

B Use <code>uploadBytes()</code> method with retry logic in your code.

C Use <code>uploadBytesResumable()</code> method with progress listeners.

D Use Firebase Realtime Database to store file chunks.

💡 Hint

Firebase Storage has a built-in method for resumable uploads.

The uploadBytesResumable() method supports resumable uploads and progress monitoring natively.

✅ Best Practice

expert

What is the best practice to secure Firebase Storage uploads to prevent unauthorized overwrites?

You want to prevent users from overwriting files uploaded by others in Firebase Storage. Which security rule approach achieves this?

A Allow write only if the file size is less than 1MB.

B Allow write only if the file does not exist yet: <code>resource == null</code> and user is authenticated.

C Allow write only if the user is authenticated, ignoring file existence.

D Allow write only during business hours.

💡 Hint

Think about how to prevent overwriting existing files by checking their existence.

Checking resource == null ensures files cannot be overwritten once uploaded, combined with authentication.

Practice

1. What is the main purpose of uploading files to Firebase Storage?

easy

A. To save files in the cloud for easy access and backup

B. To delete files from the user's device

C. To convert files into text format

D. To run files as programs on Firebase servers

Solution

1. Step 1: Understand file upload purpose

   Uploading files to Firebase Storage means saving them remotely in the cloud.

2. Step 2: Identify the benefit

   Files saved in the cloud can be accessed anytime and are backed up safely.

3. Final Answer:

   To save files in the cloud for easy access and backup -> Option A

4. Quick Check:

   Uploading files = cloud storage [OK]

Hint: Uploading means saving files online for backup and access [OK]

Common Mistakes:

• Thinking upload deletes local files
• Confusing upload with file conversion
• Believing upload runs files on server

2. Which Firebase Storage method is used to create a reference to a file location before uploading?

easy

A. firebase.storage().ref()

B. firebase.storage().upload()

C. firebase.storage().download()

D. firebase.storage().delete()

Solution

1. Step 1: Identify method to create file location

   firebase.storage().ref() creates a reference to a storage path.

2. Step 2: Confirm usage before upload

   You must create a reference before uploading a file to specify where it goes.

3. Final Answer:

   firebase.storage().ref() -> Option A

4. Quick Check:

   Reference method = ref() [OK]

Hint: Use ref() to point where file will be stored [OK]

Common Mistakes:

• Using upload() directly without ref()
• Confusing download() with upload process
• Trying to delete before uploading

3. What will the following code print if the upload is successful?

const storageRef = firebase.storage().ref('images/photo.jpg');
storageRef.put(file).then(() => console.log('Upload complete')).catch(() => console.log('Upload failed'));

medium

A. Upload failed

B. No output

C. Upload complete

D. SyntaxError

Solution

1. Step 1: Analyze the upload promise

   storageRef.put(file) returns a promise that resolves on success.

2. Step 2: Check the then() handler

   On success, it logs 'Upload complete' to the console.

3. Final Answer:

   Upload complete -> Option C

4. Quick Check:

   Successful upload logs 'Upload complete' [OK]

Hint: Successful upload triggers then() logging 'Upload complete' [OK]

Common Mistakes:

• Assuming catch() runs on success
• Confusing promise syntax
• Expecting no output on success

4. Identify the error in this Firebase file upload code:

const ref = firebase.storage().ref('docs/report.pdf');
ref.put(file).then(() => console.log('Done'));
console.log('Upload started');

medium

A. console.log('Upload started') should be inside then()

B. ref.put() should be ref.upload()

C. ref() is not a valid method

D. Missing catch() to handle upload errors

Solution

1. Step 1: Check upload method correctness

   ref.put(file) is correct to upload files in Firebase Storage.

2. Step 2: Look for error handling

   There is no catch() to handle possible upload failures, which is a best practice.

3. Final Answer:

   Missing catch() to handle upload errors -> Option D

4. Quick Check:

   Always add catch() for upload errors [OK]

Hint: Always add catch() after then() to catch errors [OK]

Common Mistakes:

• Using ref.upload() instead of ref.put()
• Placing console.log before upload completion
• Thinking ref() is invalid method

5. You want to upload a user profile picture and ensure the file is stored under 'users/{userId}/profile.jpg'. Which code snippet correctly sets the storage reference and uploads the file for user ID 'abc123'?

hard

A. const ref = firebase.storage().ref('profile.jpg/users/abc123'); ref.put(file);

B. const ref = firebase.storage().ref('users/abc123/profile.jpg'); ref.put(file);

C. const ref = firebase.storage().ref('users/profile.jpg/abc123'); ref.put(file);

D. const ref = firebase.storage().ref('abc123/users/profile.jpg'); ref.put(file);

Solution

1. Step 1: Understand the required path format

   The file must be stored under 'users/{userId}/profile.jpg', so 'users/abc123/profile.jpg' is correct.

2. Step 2: Verify the code snippet

   const ref = firebase.storage().ref('users/abc123/profile.jpg'); ref.put(file); uses the correct path and calls ref.put(file) to upload.

3. Final Answer:

   const ref = firebase.storage().ref('users/abc123/profile.jpg'); ref.put(file); -> Option B

4. Quick Check:

   Correct path format = users/abc123/profile.jpg [OK]

Hint: Use 'users/{userId}/profile.jpg' path format for user files [OK]

Common Mistakes:

• Mixing folder order in path
• Placing userId after filename
• Using incorrect slashes or order