Download URLs in Firebase - Mini Project: Build & Apply

Firebase Storage Download URLs

📖 Scenario: You are building a simple web app that stores images in Firebase Storage. You want to get the download URLs for these images so users can view them.

🎯 Goal: Learn how to create a list of image file names, configure Firebase Storage, generate download URLs for each image, and complete the setup to access these URLs.

📋 What You'll Learn

Create a list of image file names

Initialize Firebase Storage reference

Generate download URLs for each image file

Store the URLs in a list for later use

💡 Why This Matters

🌍 Real World

Getting download URLs is essential to display or share files stored in Firebase Storage in web or mobile apps.

💼 Career

Understanding how to generate and manage download URLs is a common task for cloud developers working with Firebase or similar cloud storage services.

1

Create a list of image file names

Create a list called imageFiles with these exact strings: "photo1.jpg", "photo2.jpg", "photo3.jpg".

Firebase

# Create a list called imageFiles with the exact file names
# Your code here

Need a hint?

Use square brackets to create a list (array) and include the file names as strings.

2

Initialize Firebase Storage reference

Create a constant called storage and set it to getStorage() from Firebase. Then create a constant called storageRef and set it to ref(storage).

Firebase

const imageFiles = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
// Initialize Firebase Storage reference
// Your code here

Need a hint?

Use getStorage() to get the storage service and ref(storage) to get the root reference.

3

Generate download URLs for each image file

Create an empty array called downloadURLs. Use a for loop with variable fileName to iterate over imageFiles. Inside the loop, create a reference called fileRef using ref(storageRef, fileName). Then use getDownloadURL(fileRef) and push the resulting promise into downloadURLs.

Firebase

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

const imageFiles = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
const storage = getStorage();
const storageRef = ref(storage);

// Create downloadURLs array and fill it with promises for each file
// Your code here

Need a hint?

Use a for...of loop to go through each file name and create a reference for it.

4

Complete setup to access download URLs

Use Promise.all(downloadURLs) and assign it to a constant called allURLs. This will wait for all download URL promises to resolve.

Firebase

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

const imageFiles = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
const storage = getStorage();
const storageRef = ref(storage);

const downloadURLs = [];
for (const fileName of imageFiles) {
    const fileRef = ref(storageRef, fileName);
    downloadURLs.push(getDownloadURL(fileRef));
}

// Wait for all download URLs to resolve
// Your code here

Need a hint?

Use Promise.all() to handle multiple promises and get all URLs together.