Home›Firebase in 5 Days›Day 3
Day 3 of 5
⏱ ~60 minutes
Firebase in 5 Days — Day 3

Firebase Storage

Upload images, track progress, get download URLs, and write security rules.

Uploading Files

Upload with progress
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
const storage = getStorage();

async function uploadImage(file, path) {
  const storageRef = ref(storage, path);
  const uploadTask = uploadBytesResumable(storageRef, file);

  return new Promise((resolve, reject) => {
    uploadTask.on(
      'state_changed',
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log(`Upload ${progress.toFixed(0)}%`);
      },
      reject,
      async () => {
        const url = await getDownloadURL(uploadTask.snapshot.ref);
        resolve(url);
      }
    );
  });
}

// Usage
const url = await uploadImage(file, `users/${user.uid}/avatar.jpg`);
await updateDoc(doc(db, 'users', user.uid), { avatarUrl: url });
Storage Security Rules
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // Users can read/write their own files
    match /users/{userId}/{allPaths=**} {
      allow read: if request.auth != null;
      allow write: if request.auth.uid == userId;
    }
    // Public images readable by all
    match /public/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}
📝 Day 3 Exercise
Build File Upload
  1. A
  2. d
  3. d
  5. i
  6. m
  7. a
  8. g
  9. e
  11. u
  12. p
  13. l
  14. o
  15. a
  16. d
  18. t
  19. o
  21. y
  22. o
  23. u
  24. r
  26. b
  27. l
  28. o
  29. g
  30. .
  32. W
  33. h
  34. e
  35. n
  37. a
  39. u
  40. s
  41. e
  42. r
  44. c
  45. r
  46. e
  47. a
  48. t
  49. e
  50. s
  52. a
  54. p
  55. o
  56. s
  57. t
  58. ,
  60. l
  61. e
  62. t
  64. t
  65. h
  66. e
  67. m
  69. u
  70. p
  71. l
  72. o
  73. a
  74. d
  76. a
  78. c
  79. o
  80. v
  81. e
  82. r
  84. i
  85. m
  86. a
  87. g
  88. e
  89. .
  91. S
  92. t
  93. o
  94. r
  95. e
  97. t
  98. h
  99. e
  101. d
  102. o
  103. w
  104. n
  105. l
  106. o
  107. a
  108. d
  110. U
  111. R
  112. L
  114. i
  115. n
  117. F
  118. i
  119. r
  120. e
  121. s
  122. t
  123. o
  124. r
  125. e
  127. w
  128. i
  129. t
  130. h
  132. t
  133. h
  134. e
  136. p
  137. o
  138. s
  139. t
  140. .
  142. D
  143. i
  144. s
  145. p
  146. l
  147. a
  148. y
  150. t
  151. h
  152. e
  154. i
  155. m
  156. a
  157. g
  158. e
  160. i
  161. n
  163. t
  164. h
  165. e
  167. p
  168. o
  169. s
  170. t
  172. l
  173. i
  174. s
  175. t
  176. .

Day 3 Summary

  • ref(storage, path) → uploadBytesResumable(ref, file) → getDownloadURL().
  • Use uploadBytesResumable over uploadBytes to track upload progress.
  • Storage rules match path segments. Use {userId} to match the authenticated user's folder.
  • Always store the download URL in Firestore, not the path — the URL is what you need to display images.
→
← Previous
Day 2: Firestore: NoSQL Database
Next →
Day 4: Cloud Functions
→
Finished this lesson?