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

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

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

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

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.

Practice

1. What does a Firebase Storage bucket primarily store?

easy

A. Database tables and rows

B. Files and objects organized by paths

C. User authentication data

D. Server configuration settings

Solution

1. Step 1: Understand the purpose of a storage bucket

   A Firebase Storage bucket is designed to hold files and objects, not database or user data.

2. Step 2: Identify what is stored in the bucket

   Files are stored and organized by paths that look like folders but are actually part of the file name.

3. Final Answer:

   Files and objects organized by paths -> Option B

4. Quick Check:

   Storage bucket = files and paths [OK]

Hint: Buckets hold files, not database or user info [OK]

Common Mistakes:

• Confusing storage buckets with databases
• Thinking buckets store user login data
• Assuming buckets hold server settings

2. Which of the following is the correct way to represent a folder path in a Firebase Storage bucket?

easy

A. folder1\folder2\file.txt

B. folder1-folder2-file.txt

C. folder1.folder2.file.txt

D. folder1/folder2/file.txt

Solution

1. Step 1: Recall folder path syntax in Firebase Storage

   Firebase Storage uses forward slashes '/' to separate folder names in file paths.

2. Step 2: Compare options with correct syntax

   Only folder1/folder2/file.txt uses forward slashes correctly to represent folder structure.

3. Final Answer:

   folder1/folder2/file.txt -> Option D

4. Quick Check:

   Use '/' for folders in paths [OK]

Hint: Use forward slashes '/' for folder paths [OK]

Common Mistakes:

• Using backslashes '\' instead of forward slashes
• Using dots '.' or dashes '-' as folder separators
• Thinking folders are actual directories

3. Given these file paths in a Firebase Storage bucket:
images/cats/kitty.png
images/dogs/buddy.png
Which folder path would you use in a security rule to allow read access only to cat images?

medium

A. images/cats/

B. images/dogs/

C. images/

D. cats/

Solution

1. Step 1: Identify the folder containing cat images

   The cat images are stored under the path 'images/cats/'.

2. Step 2: Choose the folder path for security rules

   To restrict access to only cat images, the rule should target 'images/cats/' folder path.

3. Final Answer:

   images/cats/ -> Option A

4. Quick Check:

   Restrict by exact folder path 'images/cats/' [OK]

Hint: Match folder path exactly for security rules [OK]

Common Mistakes:

• Using parent folder 'images/' which is too broad
• Using unrelated folder 'images/dogs/'
• Using incomplete folder name 'cats/' without parent

4. You wrote this Firebase Storage security rule snippet:

match /images/{folder}/{file} {
  allow read: if folder == "cats";
}

Why does this rule succeed in allowing reading files in images/cats/kitty.png?

medium

A. The variable 'folder' does match the folder name in the path

B. The rule syntax is incorrect; '==' cannot be used in rules

C. The rule only matches one folder level, but 'cats' is nested deeper

D. The rule does not specify 'allow read' permission

Solution

1. Step 1: Understand variable matching in the path

   The variable 'folder' captures the folder name at that path level, so it matches 'cats' for files in 'images/cats/'.

2. Step 2: Check the condition in the rule

   The condition folder == "cats" is correct, so the rule allows read access if the folder is 'cats'.

3. Step 3: Confirm why it succeeds even for nested paths

   Even if the file path has more nested folders (like 'images/cats/kitten/kitty.png'), this rule matches because it uses prefix matching: folder='cats', file='kitten', condition holds.

4. Final Answer:

   The variable 'folder' does match the folder name in the path -> Option A

5. Quick Check:

   Variable must match folder name exactly [OK]

Hint: Check variable names match folder levels exactly [OK]

Common Mistakes:

• Assuming '==' is invalid in rules
• Ignoring folder nesting levels
• Forgetting to specify permissions

5. You want to organize user uploads in a Firebase Storage bucket by user ID and file type, like uploads/user123/images/photo.png and uploads/user123/docs/resume.pdf. Which folder structure and security rule approach is best to ensure each user can only access their own files?

hard

A. Store all files in 'uploads/' and allow read access to everyone

B. Use a flat structure 'uploads/{fileName}' and check file ownership in metadata

C. Use paths like 'uploads/{userId}/{fileType}/{fileName}' and write rules matching 'userId' to request.auth.uid

D. Use separate buckets per user and no folder structure

Solution

1. Step 1: Design folder structure for user and file type

   Organizing files as 'uploads/{userId}/{fileType}/{fileName}' clearly separates files by user and type.

2. Step 2: Write security rules matching user ID

   Rules should check that the 'userId' in the path equals the authenticated user's ID (request.auth.uid) to restrict access.

3. Step 3: Evaluate other options

   Flat structure or open access risks security; separate buckets per user is complex and not scalable.

4. Final Answer:

   Use paths like 'uploads/{userId}/{fileType}/{fileName}' and write rules matching 'userId' to request.auth.uid -> Option C

5. Quick Check:

   Match userId in path to auth.uid for secure access [OK]

Hint: Match userId in path to auth.uid for secure access [OK]

Common Mistakes:

• Allowing open read access to all files
• Using flat structure without user separation
• Creating many buckets per user unnecessarily