How to Store Images in Firebase Storage

1import { getStorage, ref } from 'firebase/storage';
2import { getAuth } from 'firebase/auth';
3
4const storage = getStorage();
5const auth = getAuth();
6
7// Create a reference to the upload path
8function getImageRef(filename: string) {
9  const user = auth.currentUser;
10  if (!user) throw new Error('Must be signed in to upload');
11
12  // Store in a user-scoped path
13  return ref(storage, `images/${user.uid}/${filename}`);
14}

1import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
2
3async function uploadImage(
4  file: File,
5  onProgress?: (percent: number) => void
6): Promise<string> {
7  const user = auth.currentUser;
8  if (!user) throw new Error('Not authenticated');
9
10  const storageRef = ref(storage, `images/${user.uid}/${file.name}`);
11  const metadata = { contentType: file.type };
12
13  const uploadTask = uploadBytesResumable(storageRef, file, metadata);
14
15  return new Promise((resolve, reject) => {
16    uploadTask.on(
17      'state_changed',
18      (snapshot) => {
19        const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
20        onProgress?.(Math.round(percent));
21      },
22      (error) => {
23        console.error('Upload failed:', error.code);
24        reject(error);
25      },
26      async () => {
27        const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
28        resolve(downloadURL);
29      }
30    );
31  });
32}

1import { getFirestore, doc, updateDoc, serverTimestamp } from 'firebase/firestore';
2
3const db = getFirestore();
4
5async function uploadProfileImage(file: File): Promise<string> {
6  const user = auth.currentUser;
7  if (!user) throw new Error('Not authenticated');
8
9  // 1. Upload to Storage
10  const downloadURL = await uploadImage(file, (percent) => {
11    console.log(`Upload: ${percent}%`);
12  });
13
14  // 2. Store URL in Firestore user profile
15  await updateDoc(doc(db, 'users', user.uid), {
16    photoURL: downloadURL,
17    updatedAt: serverTimestamp()
18  });
19
20  return downloadURL;
21}

1rules_version = '2';
2service firebase.storage {
3  match /b/{bucket}/o {
4    match /images/{userId}/{fileName} {
5      // Only authenticated users can read images
6      allow read: if request.auth != null;
7
8      // Users can only upload to their own folder
9      allow write: if request.auth != null
10        && request.auth.uid == userId
11        && request.resource.size < 5 * 1024 * 1024  // 5 MB max
12        && request.resource.contentType.matches('image/.*');  // Images only
13
14      // Users can delete their own images
15      allow delete: if request.auth != null
16        && request.auth.uid == userId;
17    }
18  }
19}

1import { useState, ChangeEvent } from 'react';
2
3export function ImageUploader() {
4  const [preview, setPreview] = useState<string | null>(null);
5  const [progress, setProgress] = useState(0);
6  const [uploadedURL, setUploadedURL] = useState<string | null>(null);
7  const [error, setError] = useState<string | null>(null);
8
9  function handleFileSelect(e: ChangeEvent<HTMLInputElement>) {
10    const file = e.target.files?.[0];
11    if (!file) return;
12
13    // Client-side validation
14    if (!file.type.startsWith('image/')) {
15      setError('Please select an image file');
16      return;
17    }
18    if (file.size > 5 * 1024 * 1024) {
19      setError('File must be under 5 MB');
20      return;
21    }
22
23    setError(null);
24    setPreview(URL.createObjectURL(file));
25    handleUpload(file);
26  }
27
28  async function handleUpload(file: File) {
29    try {
30      const url = await uploadImage(file, setProgress);
31      setUploadedURL(url);
32    } catch (err) {
33      setError('Upload failed. Please try again.');
34    }
35  }
36
37  return (
38    <div>
39      <input type="file" accept="image/*" onChange={handleFileSelect} />
40      {error && <p style={{ color: 'red' }}>{error}</p>}
41      {progress > 0 && progress < 100 && <p>Uploading: {progress}%</p>}
42      {preview && <img src={preview} alt="Preview" width={200} />}
43      {uploadedURL && <p>Uploaded: {uploadedURL}</p>}
44    </div>
45  );
46}