How to Validate File Size in Firebase Storage

1const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5 MB in bytes
2
3function validateFile(file: File): string | null {
4  if (file.size > MAX_FILE_SIZE) {
5    const sizeMB = (file.size / (1024 * 1024)).toFixed(1)
6    return `File is ${sizeMB} MB. Maximum allowed size is 5 MB.`
7  }
8  return null // valid
9}
10
11// Usage with a file input
12const input = document.querySelector('input[type="file"]') as HTMLInputElement
13input.addEventListener('change', () => {
14  const file = input.files?.[0]
15  if (!file) return
16
17  const error = validateFile(file)
18  if (error) {
19    alert(error)
20    input.value = '' // clear the invalid selection
21    return
22  }
23
24  // Proceed with upload
25  uploadFile(file)
26})

1// storage.rules
2rules_version = '2';
3service firebase.storage {
4  match /b/{bucket}/o {
5    match /uploads/{userId}/{allPaths=**} {
6      allow read: if request.auth != null;
7      allow write: if request.auth != null
8                   && request.auth.uid == userId
9                   && request.resource.size < 5 * 1024 * 1024;
10    }
11  }
12}

1// storage.rules
2rules_version = '2';
3service firebase.storage {
4  match /b/{bucket}/o {
5    match /images/{userId}/{imageId} {
6      allow read: if request.auth != null;
7      allow write: if request.auth != null
8                   && request.auth.uid == userId
9                   && request.resource.size < 5 * 1024 * 1024
10                   && request.resource.contentType.matches('image/.*');
11    }
12
13    match /documents/{userId}/{docId} {
14      allow read: if request.auth != null;
15      allow write: if request.auth != null
16                   && request.auth.uid == userId
17                   && request.resource.size < 10 * 1024 * 1024
18                   && request.resource.contentType in [
19                     'application/pdf',
20                     'application/msword',
21                     'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
22                   ];
23    }
24  }
25}

1import { getStorage, ref, uploadBytes } from 'firebase/storage'
2
3const storage = getStorage()
4
5async function uploadFile(file: File) {
6  // Client-side check first
7  if (file.size > 5 * 1024 * 1024) {
8    throw new Error('File exceeds 5 MB limit')
9  }
10
11  const storageRef = ref(storage, `uploads/${userId}/${file.name}`)
12
13  try {
14    const snapshot = await uploadBytes(storageRef, file, {
15      contentType: file.type
16    })
17    console.log('Upload complete:', snapshot.metadata.fullPath)
18    return snapshot
19  } catch (error: any) {
20    if (error.code === 'storage/unauthorized') {
21      throw new Error('Upload rejected: file may exceed size limit or you lack permission')
22    }
23    throw error
24  }
25}

1import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'
2
3const storage = getStorage()
4
5function uploadWithProgress(file: File, onProgress: (percent: number) => void) {
6  const storageRef = ref(storage, `uploads/${userId}/${file.name}`)
7  const uploadTask = uploadBytesResumable(storageRef, file, {
8    contentType: file.type
9  })
10
11  return new Promise<string>((resolve, reject) => {
12    uploadTask.on('state_changed',
13      (snapshot) => {
14        const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
15        onProgress(Math.round(percent))
16      },
17      (error) => reject(error),
18      async () => {
19        const url = await getDownloadURL(uploadTask.snapshot.ref)
20        resolve(url)
21      }
22    )
23  })
24}