Firebase Setup

CORS Configuration

Your storage bucket must have CORS configured. Without it, uploads will silently fail — Firebase retries CORS errors internally and never reports them. The library detects this via stall detection and shows an error after 8 seconds, but configuring CORS correctly avoids it entirely.

Create a cors.json file:

[
  {
    "origin": ["http://localhost:5173"],
    "method": ["GET", "POST", "PUT", "DELETE", "HEAD"],
    "maxAgeSeconds": 3600,
    "responseHeader": [
      "Content-Type",
      "Authorization",
      "Content-Length",
      "User-Agent",
      "x-goog-resumable"
    ]
  }
]

Apply it with the gcloud CLI:

gcloud storage buckets update gs://YOUR_BUCKET --cors-file=cors.json

Firebase Initialization

import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';
import { FirebaseUploadManager } from 'svelte-firebase-upload';

const app = initializeApp({
  apiKey: 'your-api-key',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project',
  storageBucket: 'your-project.firebasestorage.app',
  messagingSenderId: '123456789',
  appId: '1:123456789:web:abc123'
});

const storage = getStorage(app);

const manager = new FirebaseUploadManager();
manager.setStorage(storage);

Storage Rules

Make sure your Firebase Storage rules allow uploads for authenticated users:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}