SvelteKit Integration

This guide explains how to integrate FileZen with SvelteKit applications. We recommend using our dedicated SDK packages for the best experience.

📁 Code Example: View the complete working example at github.com/FileZen/filezen/tree/main/apps/sveltekit-app

Installation

Install the required FileZen packages for a SvelteKit project:

Setup

1. Environment Configuration

Set your FileZen API key as an environment variable. This can be done in your local .env file during development or as a system environment variable in production.

.env


FILEZEN_API_KEY=your_api_key_here

The FileZen SDK automatically detects the FILEZEN_API_KEY environment variable for server-side operations.

2. API Route

The API route is crucial for security, as it keeps your API key on the server and prevents it from being exposed in the client-side code.

Create an API route to handle file uploads and other operations. The createZenSvelteRouter function from @filezen/svelte simplifies this process by creating the necessary POST and DELETE handlers.

src/routes/api/upload/+server.ts


import { FILEZEN_API_KEY } from '$env/static/private';
import { ZenApi } from '@filezen/js';
import { createZenSvelteRouter } from '@filezen/svelte';
import type { RequestEvent } from '@sveltejs/kit';
 
const zenApi = new ZenApi({
  apiKey: FILEZEN_API_KEY,
});
 
export const { POST, DELETE } = createZenSvelteRouter(zenApi);

By default, the client expects this route at /api/upload. You should create this file at src/routes/api/upload/+server.ts. If you wish to use a different path, you can create the route file elsewhere and specify the new path when initializing the ZenClient.

Request Validation Middleware (Optional)

You can add request validation middleware to verify requests before generating signed URLs for file uploads. This is useful for implementing authentication, authorization, or other custom validation logic.

src/routes/api/upload/+server.ts


import { FILEZEN_API_KEY } from '$env/static/private';
import { ZenApi, ZenError } from '@filezen/js';
import { createZenSvelteRouter } from '@filezen/svelte';
import type { RequestEvent } from '@sveltejs/kit';
 
const zenApi = new ZenApi({
  apiKey: FILEZEN_API_KEY,
});
 
const requestMiddleware = async (event: RequestEvent) => {
  /**
   * Here you can verify request, e.g - check user authentication:
   * const user = await getUserFromRequest(event);
   * if (!user) {
   *    throw new ZenError(401, 'Unauthorized');
   * }
   * return { userId: user.id }
   */
};
 
export const { POST, DELETE } = createZenSvelteRouter(zenApi, {
  onRequest: requestMiddleware,
});

The middleware function can:

Return additional metadata that will be available in the request context
Throw a ZenError to reject the request with a specific status code and message
Return void or undefined if no additional processing is needed

Using FileZen in SvelteKit

SvelteKit provides a clean way to integrate FileZen using Svelte components with reactive state management.

Svelte Component Example

Create a Svelte component that handles file uploads:

src/lib/components/FileUpload.svelte


<script lang="ts">
  import { ZenClient, type ZenError, type ZenFile } from '@filezen/js';
  import { onMount } from 'svelte';
 
  let zenClient: ZenClient;
  let error: ZenError | null = null;
  let uploadResult: ZenFile | null = null;
  let fileInput: HTMLInputElement;
 
  onMount(() => {
    zenClient = new ZenClient();
  });
 
  async function handleUpload(file: File) {
    error = null;
    try {
      const result = await zenClient.upload(file);
      if (result.error) {
        error = result.error;
        return;
      }
      uploadResult = result.file;
    } catch (err) {
      error = { code: 500, message: 'Upload failed' } as ZenError;
    }
  }
 
  function handleFileChange(event: Event) {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
      handleUpload(file);
    }
  }
</script>
 
<div>
  <input 
    bind:this={fileInput}
    type="file" 
    accept="image/*" 
    on:change={handleFileChange} 
  />
  {#if uploadResult}
    <div>Upload successful: {uploadResult.url}</div>
  {/if}
  {#if error}
    <div>Error: {error.message}</div>
  {/if}
</div>

Using Components in SvelteKit Pages

Use your components in SvelteKit pages:

src/routes/+page.svelte


<script lang="ts">
  import FileUpload from '$lib/components/FileUpload.svelte';
</script>
 
<svelte:head>
  <title>FileZen SvelteKit Example</title>
</svelte:head>
 
<main>
  <h1>FileZen Upload Example</h1>
  <p>
    This example demonstrates how to use FileZen for file uploads with SvelteKit. 
    The upload is handled with API routes and server-side processing.
  </p>
  <FileUpload />
</main>

The zenClient.upload() method requests a signed URL from your API route (/api/upload), then uploads the file directly to FileZen from the client side. This reduces traffic usage on your server since files don’t pass through your backend.