File Upload - Skeleton

Select file or drag here

<script lang="ts">
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
</script>

<FileUpload name="example" accept="image/*" maxFiles={2} onFileChange={console.log} onFileReject={console.error} classes="w-full" />

Select file or drag here

Attach up to 2 files.

<script lang="ts">
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconDropzone from 'lucide-svelte/icons/image-plus';
	import IconFile from 'lucide-svelte/icons/paperclip';
	import IconRemove from 'lucide-svelte/icons/circle-x';
</script>

<FileUpload
	name="example"
	accept="image/*"
	maxFiles={2}
	subtext="Attach up to 2 files."
	onFileChange={console.log}
	onFileReject={console.error}
	classes="w-full"
>
	{#snippet iconInterface()}<IconDropzone class="size-8" />{/snippet}
	{#snippet iconFile()}<IconFile class="size-4" />{/snippet}
	{#snippet iconFileRemove()}<IconRemove class="size-4" />{/snippet}
</FileUpload>

Button

Use the default children slot to overwrite the default dropzone interface. Allow for a custom interface.

<script lang="ts">
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconUpload from 'lucide-svelte/icons/upload';
</script>

<FileUpload name="example-button" accept="image/*" onFileChange={console.log} maxFiles={2}>
	<button class="btn preset-filled">
		<IconUpload class="size-4" />
		<span>Select File</span>
	</button>
</FileUpload>

Disabled

Select file or drag here

Bind to API

You can optionally bind to the internal Zag component API to access additional methods such as clearFiles().

Select file or drag here

<script lang="ts">
	import { FileUpload, type FileUploadApi } from '@skeletonlabs/skeleton-svelte';

	// API Reference
	let apiRef: FileUploadApi;
</script>

<section class="w-full space-y-4">
	<FileUpload name="example" accept="image/*" maxFiles={2} bind:internalApi={apiRef} />
	<button type="button" class="btn preset-filled" onclick={apiRef.clearFiles}>Clear Files</button>
</section>

RTL

Select file or drag here

<script lang="ts">
	import { FileUpload } from '@skeletonlabs/skeleton-svelte';
</script>

<FileUpload
	name="example"
	accept="image/*"
	maxFiles={2}
	onFileChange={console.log}
	onFileReject={console.error}
	classes="w-full"
	dir="rtl"
/>

Additional Features

Accepted File Formats

<FileUpload accept="image/*">
<FileUpload accept={"text/html": [".html", ".htm"]}>

File Validation

<FileUpload maxFiles={5}>
<FileUpload minFileSize={1024 * 1024 * 5}> <!-- 5 mb -->
<FileUpload maxFileSize={1024 * 1024 * 10}> <!-- 10 mb -->

Custom Validation

function validateFileSize(file) {
  if (file.size > 1024 * 1024 * 10) return ["FILE_TOO_LARGE"];
  return null;
}

<FileUpload validate={validateFileSize} onFileReject={console.error}>

Events

<FileUpload onFileChange={console.log}> <!-- Triggers when files changed. -->
<FileUpload onFileAccept={console.log}> <!-- Triggers when files are accepted. -->
<FileUpload onFileReject={console.error}> <!-- Triggers when files are rejected. -->

Image Previews

function generatePreview(event) {
  const reader = new FileReader();
  reader.onload = (event) => {
    const image = event.target.result;
    // set the image as the src of an image element
  }
  reader.readAsDataURL(details.acceptedFiles[0]);
}

<FileUpload onFileChange={generatePreview}>

Miscellaneous

<FileUpload allowDrop> <!-- Enable drag-and-drop -->
<FileUpload directory> <!-- Enable dirctories -->
<FileUpload capture> <!-- Enable media capture on mobile devices -->