Components

UploadPanel

Floating panel that shows upload progress, errors, and per-file actions. Includes tabs for filtering (All / Uploading / Completed / Failed), real-time speed and ETA, and toast notifications.

Usage

<script>
  import { FirebaseUploadManager, UploadPanel } from 'svelte-firebase-upload';

  const manager = new FirebaseUploadManager({ autoStart: true });
  let showPanel = $state(true);
</script>

<UploadPanel
  uploadManager={manager}
  bind:visible={showPanel}
  position="bottom-right"
  onerror={(item, error) => console.log('Failed:', item.file.name, error)}
/>

Props

Prop	Type	Default	Description
uploadManager	FirebaseUploadManager	required	Manager instance
visible	boolean	true	Bindable show/hide
position	'bottom-right' | 'bottom-left'	'bottom-right'	Panel screen position
onerror	(item: UploadItem, error: string) => void	—	Error callback

Panel Features

• Minimize/expand toggle for compact view
• Tabbed filtering — All, Uploading, Completed, Failed
• Per-file actions — cancel (uploading), retry (failed), copy link (completed)
• Close protection — disabled during active uploads
• Toast notifications — automatic error/warning toasts
• Virtualized list — efficient rendering for large file counts

---

UploadDropZone

Drag & drop area with click-to-browse. Supports custom content via Svelte snippets.

Usage

Basic

<UploadDropZone
  uploadManager={manager}
  accept="image/*,.pdf"
  path="user-uploads/"
  maxSize={10 * 1024 * 1024}
/>

Custom Content

<UploadDropZone uploadManager={manager} accept="image/*">
  {#snippet children()}
    <div class="custom-zone">
      <p>Drop your images here</p>
      <button>Browse Files</button>
    </div>
  {/snippet}
</UploadDropZone>

Props

Prop	Type	Default	Description
uploadManager	FirebaseUploadManager	required	Manager instance
accept	string	''	File type filter (MIME types or extensions)
multiple	boolean	true	Allow multiple files
maxSize	number	—	Max file size in bytes
path	string	'uploads/'	Firebase Storage directory
disabled	boolean	false	Disable interaction
class	string	—	Custom CSS class
children	Snippet	—	Custom drop zone content