FileUpload

Import

import { FileUpload } from '@delightstack/components';

Basic Usage

Upload images

Drop files here or browse

Images only

View code

<script>
  import { FileUpload } from '@delightstack/components';

  let files = $state<File[]>([]);
</script>

<FileUpload bind:files accept="image/*" label="Upload images" />

Examples

Dropzone (Default)

A large dashed-border area that accepts drag-and-drop or click-to-browse.

Upload images

Drop files here or browse

Images only

View code

<FileUpload accept="image/*" multiple label="Upload images" />

Compact Variant

A button-style trigger with a file list rendered below.

Choose files

View code

<FileUpload compact accept="image/*,application/pdf" multiple />

Avatar Variant

A circular upload area for profile pictures. Automatically single-file only.

View code

<FileUpload avatar accept="image/*" />

File Validation

Validate file type, size, and count. Errors are reported per file via the onerror callback.

Upload documents (PDF, DOC — max 3 files, 10MB each)

Drop files here or browse

PDF, DOC, or DOCX

View code

<FileUpload
  bind:files
  accept=".pdf,.doc,.docx"
  max_size={10 * 1024 * 1024}
  max_files={3}
  multiple
  label="Upload documents (PDF, DOC — max 3 files, 10MB each)"
/>

Custom File Item Rendering

Use the file_item snippet to customize how each file appears in the list. Useful for showing upload progress or custom layouts.

Upload files

Drop files here or browse

View code

<script>
  import { FileUpload } from '@delightstack/components';

  let files = $state([]);
</script>

<FileUpload bind:files multiple label="Upload files">
  {#snippet file_item({ file, index, remove })}
    <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 0.375rem; margin-top: 0.5rem;">
      <span style="flex: 1;">{file.name} ({(file.size / 1024).toFixed(1)} KB)</span>
      <button onclick={remove}>Remove</button>
    </div>
  {/snippet}
</FileUpload>

With Error

Drop files here or browse

Images only

Please upload at least one image

View code

<FileUpload accept="image/*" error="Please upload at least one image" />

Props

Prop	Type	Default	Description
files	File[]	[]	Selected files, bindable
accept	string	-	Accepted file types (e.g. 'image/*', '.pdf,.doc')
multiple	boolean	false	Allow multiple files
max_size	number	-	Max file size in bytes
max_files	number	-	Max number of files
disabled	boolean	false	Disable upload
preview	boolean	true	Show image thumbnails in file list
dropzone	boolean	true	Large drop target variant (default)
compact	boolean	false	Button-style trigger variant
avatar	boolean	false	Circular avatar upload variant
size	'0' | '1' | '2'	'1'	Component size
skeleton	boolean	false	Show skeleton loading state
label	string	-	Instruction text / accessible label
error	string	-	Global error message
dense	boolean	false	Compact internal padding
comfortable	boolean	false	Relaxed internal padding
id	string	auto	Element ID
name	string	-	Form field name
class	string	''	Additional CSS classes
file_item	Snippet<[{ file, index, remove }]>	-	Custom file list item rendering

Events

Event	Detail	Description
onselect	{ files: File[] }	Files selected (via click or drop)
onremove	{ file: File, index: number }	File removed from list
onerror	{ file: File, error: string }	File validation failed

Accessibility

• Keyboard navigation: Tab to focus, Enter/Space to open file picker
• aria-label on the drop zone describes the action
• Each file in the list has a labeled remove button
• Focus management after file selection
• Drag-and-drop provides visual feedback with border and background color changes