How to Organize Folders and File Paths in Firebase Storage

1// Recommended folder structures:
2
3// User-scoped files
4// users/{uid}/avatar/profile.jpg
5// users/{uid}/documents/resume.pdf
6// users/{uid}/uploads/photo-001.jpg
7
8// Shared/public content
9// public/banners/hero.jpg
10// public/icons/logo.svg
11
12// Team/org-scoped files
13// teams/{teamId}/assets/logo.png
14// teams/{teamId}/documents/contract.pdf
15
16// Timestamped uploads for uniqueness
17// users/{uid}/photos/{timestamp}-{filename}

1import { getStorage, ref, uploadBytes, uploadBytesResumable } from "firebase/storage";
2import { getAuth } from "firebase/auth";
3
4const storage = getStorage();
5const auth = getAuth();
6
7async function uploadUserFile(
8  file: File,
9  subfolder: string
10): Promise<string> {
11  const user = auth.currentUser;
12  if (!user) throw new Error("Must be logged in to upload");
13
14  // Build the path: users/{uid}/{subfolder}/{filename}
15  const timestamp = Date.now();
16  const safeName = file.name.replace(/[^a-zA-Z0-9.-]/g, "_");
17  const filePath = `users/${user.uid}/${subfolder}/${timestamp}-${safeName}`;
18
19  const storageRef = ref(storage, filePath);
20  const metadata = {
21    customMetadata: {
22      uploadedBy: user.uid,
23      originalName: file.name,
24    },
25  };
26
27  await uploadBytes(storageRef, file, metadata);
28  return filePath;
29}
30
31// Usage
32// uploadUserFile(selectedFile, "documents");

1import { getStorage, ref, listAll, list, getDownloadURL } from "firebase/storage";
2
3const storage = getStorage();
4
5// List all files in a folder
6async function listFolder(folderPath: string) {
7  const folderRef = ref(storage, folderPath);
8  const result = await listAll(folderRef);
9
10  // Files in this folder
11  for (const item of result.items) {
12    const url = await getDownloadURL(item);
13    console.log(`File: ${item.name}, URL: ${url}`);
14  }
15
16  // Subfolders
17  for (const prefix of result.prefixes) {
18    console.log(`Subfolder: ${prefix.name}`);
19  }
20}
21
22// Paginated listing for large folders
23async function listFolderPaginated(
24  folderPath: string,
25  pageSize: number = 20
26) {
27  const folderRef = ref(storage, folderPath);
28  let pageToken: string | undefined;
29  const allItems = [];
30
31  do {
32    const result = await list(folderRef, {
33      maxResults: pageSize,
34      pageToken,
35    });
36    allItems.push(...result.items);
37    pageToken = result.nextPageToken;
38  } while (pageToken);
39
40  return allItems;
41}

1// storage.rules
2rules_version = '2';
3service firebase.storage {
4  match /b/{bucket}/o {
5
6    // User-scoped files: only the owner can read/write
7    match /users/{userId}/{allPaths=**} {
8      allow read, write: if request.auth != null
9                         && request.auth.uid == userId;
10    }
11
12    // User avatars: anyone can read, only owner can write
13    match /users/{userId}/avatar/{fileName} {
14      allow read: if true;
15      allow write: if request.auth != null
16                   && request.auth.uid == userId
17                   && request.resource.size < 5 * 1024 * 1024
18                   && request.resource.contentType.matches('image/.*');
19    }
20
21    // Public folder: anyone can read, no one can write via client
22    match /public/{allPaths=**} {
23      allow read: if true;
24      allow write: if false;
25    }
26
27    // Team files: only team members can access
28    match /teams/{teamId}/{allPaths=**} {
29      allow read, write: if request.auth != null
30                         && request.auth.token.teamId == teamId;
31    }
32  }
33}

1import { getStorage, ref, listAll, deleteObject } from "firebase/storage";
2
3const storage = getStorage();
4
5async function deleteFolder(folderPath: string): Promise<number> {
6  const folderRef = ref(storage, folderPath);
7  const result = await listAll(folderRef);
8  let deletedCount = 0;
9
10  // Delete all files in this folder
11  const deletePromises = result.items.map(async (itemRef) => {
12    await deleteObject(itemRef);
13    deletedCount++;
14  });
15
16  // Recursively delete subfolders
17  const subfolderPromises = result.prefixes.map((prefix) =>
18    deleteFolder(prefix.fullPath)
19  );
20
21  await Promise.all([...deletePromises, ...subfolderPromises]);
22
23  for (const subfolder of subfolderPromises) {
24    deletedCount += await subfolder;
25  }
26
27  return deletedCount;
28}
29
30// Usage: deleteFolder(`users/${userId}`);