How to Upload Files to Firebase Storage

1import { initializeApp } from 'firebase/app';
2import { getStorage, ref } from 'firebase/storage';
3
4const app = initializeApp(firebaseConfig);
5const storage = getStorage(app);
6
7// Create a reference to a file path
8const fileRef = ref(storage, `uploads/${userId}/${fileName}`);

1import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
2
3async function uploadFile(file: File, userId: string) {
4  const fileRef = ref(storage, `uploads/${userId}/${Date.now()}-${file.name}`);
5
6  // Upload the file
7  const snapshot = await uploadBytes(fileRef, file, {
8    contentType: file.type,
9    customMetadata: { uploadedBy: userId },
10  });
11
12  // Get the download URL
13  const url = await getDownloadURL(snapshot.ref);
14  return { path: snapshot.ref.fullPath, url };
15}

1import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
2
3function uploadWithProgress(
4  file: File,
5  userId: string,
6  onProgress: (percent: number) => void
7): Promise<string> {
8  return new Promise((resolve, reject) => {
9    const fileRef = ref(storage, `uploads/${userId}/${Date.now()}-${file.name}`);
10    const uploadTask = uploadBytesResumable(fileRef, file, {
11      contentType: file.type,
12    });
13
14    uploadTask.on(
15      'state_changed',
16      (snapshot) => {
17        const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
18        onProgress(Math.round(percent));
19      },
20      (error) => reject(error),
21      async () => {
22        const url = await getDownloadURL(uploadTask.snapshot.ref);
23        resolve(url);
24      }
25    );
26  });
27}
28
29// Usage with pause/resume
30// uploadTask.pause();
31// uploadTask.resume();
32// uploadTask.cancel();

1// storage.rules
2rules_version = '2';
3service firebase.storage {
4  match /b/{bucket}/o {
5    match /uploads/{userId}/{allPaths=**} {
6      // Only the file owner can upload and read
7      allow read: if request.auth != null
8        && request.auth.uid == userId;
9
10      allow write: if request.auth != null
11        && request.auth.uid == userId
12        // Limit file size to 10 MB
13        && request.resource.size < 10 * 1024 * 1024
14        // Allow only images and PDFs
15        && request.resource.contentType.matches('image/.*|application/pdf');
16
17      allow delete: if request.auth != null
18        && request.auth.uid == userId;
19    }
20  }
21}

1const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'application/pdf'];
2const MAX_SIZE_BYTES = 10 * 1024 * 1024; // 10 MB
3
4function validateFile(file: File): { valid: boolean; error?: string } {
5  if (!ALLOWED_TYPES.includes(file.type)) {
6    return { valid: false, error: `File type '${file.type}' is not allowed.` };
7  }
8  if (file.size > MAX_SIZE_BYTES) {
9    const sizeMB = (file.size / (1024 * 1024)).toFixed(1);
10    return { valid: false, error: `File is ${sizeMB} MB. Maximum is 10 MB.` };
11  }
12  return { valid: true };
13}

1// cors.json — save this file locally
2[
3  {
4    "origin": ["http://localhost:3000", "https://your-domain.com"],
5    "method": ["GET", "POST", "PUT", "DELETE"],
6    "maxAgeSeconds": 3600,
7    "responseHeader": ["Content-Type", "Authorization"]
8  }
9]
10
11// Apply with gsutil (run in your terminal)
12// gsutil cors set cors.json gs://YOUR_PROJECT.appspot.com