How to Get the Public URL of a Firebase Storage File

1import { getStorage, ref, getDownloadURL } from 'firebase/storage';
2
3const storage = getStorage();
4
5async function getFileUrl(filePath: string): Promise<string> {
6  const fileRef = ref(storage, filePath);
7  const url = await getDownloadURL(fileRef);
8  console.log('Download URL:', url);
9  return url;
10}
11
12// Example: get URL for an uploaded image
13const url = await getFileUrl('users/abc123/avatar.jpg');
14// Returns: https://firebasestorage.googleapis.com/v0/b/BUCKET/o/users%2Fabc123%2Favatar.jpg?alt=media&token=TOKEN

1import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
2
3const storage = getStorage();
4
5async function uploadAndGetUrl(file: File, path: string): Promise<string> {
6  const fileRef = ref(storage, path);
7
8  // Upload the file
9  await uploadBytes(fileRef, file);
10
11  // Get the download URL
12  const url = await getDownloadURL(fileRef);
13  return url;
14}
15
16// With resumable upload and progress
17import { uploadBytesResumable } from 'firebase/storage';
18
19function uploadWithProgress(file: File, path: string): Promise<string> {
20  return new Promise((resolve, reject) => {
21    const fileRef = ref(storage, path);
22    const task = uploadBytesResumable(fileRef, file);
23
24    task.on('state_changed',
25      (snapshot) => {
26        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
27        console.log(`Upload: ${progress.toFixed(0)}%`);
28      },
29      reject,
30      async () => {
31        const url = await getDownloadURL(task.snapshot.ref);
32        resolve(url);
33      }
34    );
35  });
36}

1import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
2import { getFirestore, doc, updateDoc } from 'firebase/firestore';
3
4const storage = getStorage();
5const db = getFirestore();
6
7async function uploadUserAvatar(
8  userId: string,
9  file: File
10): Promise<string> {
11  // Upload to a user-specific path
12  const filePath = `users/${userId}/avatar.jpg`;
13  const fileRef = ref(storage, filePath);
14  await uploadBytes(fileRef, file);
15
16  // Get the download URL
17  const url = await getDownloadURL(fileRef);
18
19  // Store the URL in the user's Firestore document
20  await updateDoc(doc(db, 'users', userId), {
21    avatarUrl: url,
22    avatarPath: filePath
23  });
24
25  return url;
26}

1// After setting allUsers as Storage Object Viewer on your bucket,
2// files are accessible via this public URL pattern:
3// https://storage.googleapis.com/YOUR-BUCKET/path/to/file.jpg
4
5// No token needed — the URL is permanent and public
6function getPublicUrl(bucket: string, filePath: string): string {
7  const encodedPath = encodeURIComponent(filePath)
8    .replace(/%2F/g, '/');
9  return `https://storage.googleapis.com/${bucket}/${encodedPath}`;
10}
11
12// Example:
13const publicUrl = getPublicUrl(
14  'myproject.appspot.com',
15  'public/hero-image.jpg'
16);

1// Server-side: Node.js with Firebase Admin SDK
2import { initializeApp, cert } from 'firebase-admin/app';
3import { getStorage } from 'firebase-admin/storage';
4
5const app = initializeApp({
6  credential: cert('./service-account.json'),
7  storageBucket: 'YOUR-PROJECT.appspot.com'
8});
9
10const bucket = getStorage(app).bucket();
11
12async function getSignedUrl(
13  filePath: string,
14  expiresInMinutes: number = 60
15): Promise<string> {
16  const file = bucket.file(filePath);
17  const [url] = await file.getSignedUrl({
18    action: 'read',
19    expires: Date.now() + expiresInMinutes * 60 * 1000
20  });
21  return url;
22}
23
24// URL expires in 24 hours
25const tempUrl = await getSignedUrl('users/abc123/report.pdf', 1440);