Firebase Storage

Download URL

firekitDownloadUrl resolves the public download URL for a Storage path and keeps it reactive.

<script lang="ts">
  import { firekitDownloadUrl } from 'svelte-firekit';

  const avatar = firekitDownloadUrl('images/user-avatars/uid-123.jpg');
</script>

{#if avatar.loading}
  <div class="avatar-placeholder" />
{:else if avatar.url}
  <img src={avatar.url} alt="User avatar" />
{/if}

Instance properties

Property	Type	Description
url	string | null	Download URL once resolved
loading	boolean	true while resolving
error	Error | null	Set if the URL cannot be resolved

Resumable upload

firekitUploadTask starts a resumable upload and exposes reactive progress state.

<script lang="ts">
  import { firekitUploadTask } from 'svelte-firekit';

  let file = $state<File | null>(null);
  let upload = $derived(
    file ? firekitUploadTask(`uploads/${file.name}`, file) : null
  );
</script>

<input type="file" onchange={(e) => (file = e.currentTarget.files?.[0] ?? null)} />

{#if upload}
  <progress value={upload.progress} max={100} />
  <p>{upload.state}</p>

  {#if upload.downloadURL}
    <a href={upload.downloadURL}>View file</a>
  {/if}

  {#if upload.error}
    <p class="error">{upload.error.message}</p>
  {/if}

  <button onclick={() => upload?.pause()}>Pause</button>
  <button onclick={() => upload?.resume()}>Resume</button>
  <button onclick={() => upload?.cancel()}>Cancel</button>
{/if}

Instance properties

Property	Type	Description
progress	number	Upload progress 0–100
state	UploadState	'running' | 'paused' | 'success' | 'error' | 'canceled'
downloadURL	string | null	Available once upload completes successfully
error	Error | null	Set if the upload fails
bytesTransferred	number	Bytes transferred so far
totalBytes	number	Total file size in bytes

Upload with custom metadata

const upload = firekitUploadTask('uploads/file.jpg', file, {
  contentType: 'image/jpeg',
  customMetadata: { uploadedBy: uid },
});

Directory listing

firekitStorageList lists all items (files) and prefixes (sub-directories) under a Storage path.

<script lang="ts">
  import { firekitStorageList } from 'svelte-firekit';

  const dir = firekitStorageList('uploads/2024');
</script>

{#if dir.loading}
  <p>Loading…</p>
{:else}
  <h3>Files</h3>
  {#each dir.items as item}
    <p>{item.name} — {item.fullPath}</p>
  {/each}

  <h3>Sub-directories</h3>
  {#each dir.prefixes as prefix}
    <p>{prefix.name}</p>
  {/each}
{/if}

File management utilities

import { deleteFile, getFileMetadata, updateFileMetadata } from 'svelte-firekit';

// Delete a file
await deleteFile('images/old-avatar.jpg');

// Read metadata
const meta = await getFileMetadata('images/avatar.jpg');
console.log(meta.size, meta.contentType, meta.timeCreated);

// Update metadata
await updateFileMetadata('images/avatar.jpg', {
  contentType: 'image/webp',
  customMetadata: { uploadedBy: uid, processed: 'true' },
});

<DownloadURL> component

<script lang="ts">
  import { DownloadURL } from 'svelte-firekit';
</script>

<DownloadURL path="images/avatar.jpg">
  {#snippet data(url)}
    <img src={url} alt="Avatar" />
  {/snippet}
  {#snippet loading()}
    <div class="skeleton" />
  {/snippet}
</DownloadURL>

<UploadTask> component

<script lang="ts">
  import { UploadTask } from 'svelte-firekit';

  let file: File;
</script>

<UploadTask path={`uploads/${file?.name}`} {file}>
  {#snippet data({ progress, state, downloadURL })}
    <progress value={progress} max={100} />
    {#if downloadURL}<a href={downloadURL}>Download</a>{/if}
  {/snippet}
</UploadTask>