FileKit Svelte

Svelte components for easy media management with FileKit.dev Must have a registered account on https://filekit.dev

Installation

npm install filekit-svelte

Usage

Setup Token (Server-side)

// +page.server.ts
import { createToken } from 'filekit-svelte';

export async function load() {
  const { token, error } = await createToken('your-api-key');
  return { token, error };
}

Upload Component

<script>
  import { Uploader } from 'filekit-svelte';
  
  let { data } = $props();
  
  function handleUpload({ reference, thumbnails }) {
    console.log('Uploaded:', reference);
  }
  
  function handleProgress({ percentage }) {
    console.log('Progress:', percentage);
  }
</script>

<Uploader 
  token={data.token}
  onUpload={handleUpload}
  onProgress={handleProgress}
  screenshotCount={3}
/>

Video Player

<script>
  import { Video } from 'filekit-svelte';
  
  let { data } = $props();
</script>

<Video
  reference="your-video-reference"
  token={data.token}
  controls
  autoplay
/>

Image Component

<script>
  import { Image } from 'filekit-svelte';

  let { data } = $props();
</script>

<Image 
  reference="your-image-reference"
  token={data.token}
  alt="My image"
/>

API

Uploader Props

• token (required): Authentication token
• onUpload: Callback when upload completes
• onProgress: Callback for upload progress
• onError: Callback for errors

Video Props

• reference (required): Media reference ID
• token (required): Authentication token
• onError: Callback for errors
• All standard video element props

posterSrc is resolved with the selected or default thumbnail

Image Props

• reference (required): Image reference ID
• token (required): Authentication token
• alt: Alt text (default: "Image")
• onError: Callback for errors
• All standard img element props

License

MIT