Uploading files in Firebase - Mini Project: Build & Apply

Uploading files

📖 Scenario: You are building a simple web app that lets users upload images to Firebase Storage. This helps users save their pictures safely in the cloud.

🎯 Goal: Build a Firebase Storage file upload setup that allows uploading a single image file from an HTML form to Firebase Storage.

📋 What You'll Learn

Create an HTML file input element with id fileInput

Create a Firebase Storage reference variable called storageRef

Write a function called uploadFile that uploads the selected file to Firebase Storage

Add an event listener to the file input to trigger uploadFile on file selection

💡 Why This Matters

🌍 Real World

Uploading files to cloud storage is common in apps for saving user photos, documents, or backups securely online.

💼 Career

Knowing how to integrate Firebase Storage for file uploads is useful for frontend and full-stack developers building cloud-connected applications.

1

Create HTML file input element

Create an HTML file input element with id="fileInput" inside a <form> tag. This will let users select a file to upload.

Firebase

Hint

Use the <input> tag with type="file" and id="fileInput".

2

Create Firebase Storage reference

Create a variable called storageRef and assign it the Firebase Storage reference using firebase.storage().ref().

Firebase

  


// Create a variable storageRef for Firebase Storage reference
// Your code here

Hint

Use const storageRef = firebase.storage().ref(); to get the root storage reference.

3

Write uploadFile function

Write a function called uploadFile that gets the selected file from the input with id="fileInput", creates a child reference in storageRef with the file name, and uploads the file using put().

Firebase

  


const storageRef = firebase.storage().ref();

// Write function uploadFile to upload selected file to Firebase Storage
// Your code here

Hint

Get the file from fileInput.files[0], then use storageRef.child(file.name) to create a reference, then upload with put(file).

4

Add event listener to file input

Add an event listener to the file input element with id="fileInput" that calls the uploadFile function when a file is selected (on the change event).

Firebase

  


const storageRef = firebase.storage().ref();

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const fileRef = storageRef.child(file.name);
  fileRef.put(file);
}

// Add event listener to fileInput for 'change' event to call uploadFile
// Your code here

Hint

Use addEventListener('change', uploadFile) on the file input element.

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