Svelte

Reactive upload state for Svelte 5, powered by runes. Same upload flow as browser uploads, wrapped in a class with reactive fields.

Upload class

Import from sonuslab-storage/svelte. Instantiate once per upload surface; the instance exposes reactive status, progress, and error fields plus upload() and reset() methods.

Uploader.svelte

<script lang="ts">
  import { Upload } from 'sonuslab-storage/svelte'

  const uploader = new Upload({
    presignEndpoint: '/api/upload/presign',
    completeEndpoint: '/api/upload/complete',
  })

  function onChange(e: Event) {
    const file = (e.target as HTMLInputElement).files?.[0]
    if (!file) return
    uploader.upload(file)
  }
</script>

<input type="file" onchange={onChange} disabled={uploader.status === 'uploading'} />

{#if uploader.status === 'uploading'}
  <p>{uploader.progress}%</p>
{/if}
{#if uploader.status === 'error'}
  <p>{uploader.error?.message}</p>
  <button onclick={() => uploader.reset()}>Retry</button>
{/if}

Reactive fields

Parameter	Type	Description
`status`	`'idle' \| 'uploading' \| 'complete' \| 'error'`	Current upload state.
`progress`	`{ loaded, total, percent } \| null`	Live progress during the PUT (0–100).
`error`	`Error \| null`	Populated when status is error.

Methods

Parameter	Type	Description
`upload(file)`	`(file: File, metadata?: Record<string, unknown>) => Promise<UploadResult>`	Run the presign → PUT → complete flow. Resolves with fileId + key.
`reset()`	`() => void`	Clear status, progress, and error back to idle.

Lifecycle callbacks

Pass these in the constructor for side-effects without reacting to status.

Parameter	Type	Description
`onStart`	`(file: File) => void`	Fires when upload() is invoked, before any network I/O.
`onComplete`	`(result: UploadResult) => void`	Fires after the complete step resolves.
`onError`	`(err: Error) => void`	Fires when the upload rejects (after status becomes error).