Svelte Firebase Upload

File upload manager for Svelte 5 + Firebase Storage. Concurrent uploads, resumable transfers, file validation, and a Dropbox-style upload panel — zero extra dependencies.

Install

npm install svelte-firebase-upload firebase

Quick Start

<script>
  import { initializeApp } from 'firebase/app';
  import { getStorage } from 'firebase/storage';
  import { FirebaseUploadManager, UploadPanel, UploadDropZone } from 'svelte-firebase-upload';

  const app = initializeApp({ /* your config */ });
  const storage = getStorage(app);

  const manager = new FirebaseUploadManager({
    maxConcurrentUploads: 3,
    autoStart: true
  });

  manager.setStorage(storage);

  let showPanel = $state(true);
</script>

<UploadDropZone uploadManager={manager} accept="image/*,.pdf" />
<UploadPanel uploadManager={manager} bind:visible={showPanel} />

Features

Concurrent Uploads

Upload multiple files simultaneously with configurable concurrency limits.

Resumable Transfers

Chunk-based uploads that can recover from interruptions and resume where they left off.

File Validation

Size limits, type checks, duplicate detection, and security scanning built in.

Dropbox-style UI

Floating panel with real-time progress, tabs, per-file actions, and toast notifications.

Drag & Drop

Standalone drop zone component with file filtering and custom content slots.

Network Awareness

Monitors connection quality, adapts to conditions, and handles offline/online transitions.

Plugin System

Extensible hooks for every upload lifecycle event with built-in presets.

TypeScript

Fully typed API with comprehensive type exports.

Next Steps

Components UploadPanel and UploadDropZone usage and props.

Manager API Full FirebaseUploadManager API reference.

Plugins Built-in plugins and how to create your own.

Theming CSS custom properties for visual customization.

Firebase Setup CORS configuration and storage bucket setup.

Advanced Resumable uploads, network resilience, and health checks.