Storage bucket structure in Firebase - Mini Project: Build & Apply

Storage bucket structure

📖 Scenario: You are setting up a Firebase Storage bucket to organize files for a photo sharing app. You want to create a clear folder structure inside the bucket to separate user profile pictures and shared album photos.

🎯 Goal: Build a Firebase Storage bucket folder structure with two main folders: profile_pictures/ and shared_albums/. Each folder will hold files for different purposes.

📋 What You'll Learn

Create a Firebase Storage bucket reference variable named storage.

Create a reference to the profile_pictures/ folder named profilePicturesRef.

Create a reference to the shared_albums/ folder named sharedAlbumsRef.

Add a configuration variable maxFileSize set to 5MB (5 * 1024 * 1024 bytes).

Write a function uploadFileToFolder that uploads a file to a specified folder reference.

Complete the upload function call to upload a file named userPhoto.jpg to the profile_pictures/ folder.

💡 Why This Matters

🌍 Real World

Organizing files in cloud storage buckets is essential for apps that handle user uploads, like photos or documents. Clear folder structures help manage and secure files.

💼 Career

Cloud engineers and app developers often configure storage buckets and write code to upload and manage files securely and efficiently.

1

Create Firebase Storage bucket references

Create a Firebase Storage bucket reference variable called storage using getStorage(). Then create two folder references: profilePicturesRef for the folder profile_pictures/ and sharedAlbumsRef for the folder shared_albums/ using ref(storage, folderName).

Firebase

// Your code here to create storage and folder references

Need a hint?

Use getStorage() to get the storage bucket. Use ref(storage, 'folder_name/') to create folder references.

2

Add configuration variable for max file size

Add a constant variable called maxFileSize and set it to 5 megabytes (5 * 1024 * 1024 bytes).

Firebase

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

const storage = getStorage();
const profilePicturesRef = ref(storage, 'profile_pictures/');
const sharedAlbumsRef = ref(storage, 'shared_albums/');

// Your code here to add maxFileSize

Need a hint?

Calculate 5 megabytes in bytes by multiplying 5 by 1024 twice.

3

Write upload function for files

Write an async function called uploadFileToFolder that takes two parameters: folderRef and file. Inside the function, create a specific file reference const fileRef = ref(folderRef, file.name); then use uploadBytes(fileRef, file) to upload the file.

Firebase

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

const storage = getStorage();
const profilePicturesRef = ref(storage, 'profile_pictures/');
const sharedAlbumsRef = ref(storage, 'shared_albums/');

const maxFileSize = 5 * 1024 * 1024;

// Your code here to write uploadFileToFolder function

Need a hint?

Use async and await keywords. Create fileRef with ref(folderRef, file.name). Use uploadBytes(fileRef, file) from Firebase Storage.

4

Upload a file to profile pictures folder

Create a variable called file with the value new File([], 'userPhoto.jpg'). Then call uploadFileToFolder(profilePicturesRef, file) to upload the file to the profile pictures folder.

Firebase

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

const storage = getStorage();
const profilePicturesRef = ref(storage, 'profile_pictures/');
const sharedAlbumsRef = ref(storage, 'shared_albums/');

const maxFileSize = 5 * 1024 * 1024;

async function uploadFileToFolder(folderRef, file) {
    const fileRef = ref(folderRef, file.name);
    await uploadBytes(fileRef, file);
}

// Your code here to create file and upload it

Need a hint?

Create a new empty File object with the name 'userPhoto.jpg'. Then call the upload function with the profile pictures folder reference and the file.