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

Need a 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

Need a 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

Need a 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

Need a hint?

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