FileUpload

The FileUpload component provides a modern interface for uploading files with drag-and-drop support, file validation, and progress tracking. It's designed to be user-friendly and accessible.

Examples

Basic File Upload

Drop files here or click to browse

svelte

<FileUpload 
  dropzoneLabel="Drop files here or click to browse"
  browseLabel="Select Files"
  onchange={(e) => console.log(e.detail.files)}
/>

Image Upload

Drop images here or click to browse

Maximum size: 2 MB

Accepted types: image/*

svelte

<FileUpload 
  accept="image/*"
  dropzoneLabel="Drop images here or click to browse"
  browseLabel="Select Images"
  maxSize={2097152} // 2MB
  onchange={(e) => console.log(e.detail.files)}
/>

Document Upload

Drop documents here or click to browse

Accepted types: .pdf,.doc,.docx,.txt

svelte

<FileUpload 
  accept=".pdf,.doc,.docx,.txt"
  dropzoneLabel="Drop documents here or click to browse"
  browseLabel="Select Documents"
  onchange={(e) => console.log(e.detail.files)}
/>

Single File Upload

Drop a file here or click to browse

svelte

<FileUpload 
  multiple={false}
  dropzoneLabel="Drop a file here or click to browse"
  browseLabel="Select File"
  onchange={(e) => console.log(e.detail.files)}
/>

With File Validation

Drop up to 3 images (max 1MB each)

Maximum 3 files

Maximum size: 1 MB

Accepted types: image/*

svelte

<FileUpload 
  accept="image/*"
  maxFiles={3}
  maxSize={1048576} // 1MB
  dropzoneLabel="Drop up to 3 images (max 1MB each)"
  browseLabel="Select Images"
  onerror={(e) => console.log(e.detail.errors)}
/>

Disabled State

Upload disabled

svelte

<FileUpload 
  disabled
  dropzoneLabel="Upload disabled"
  browseLabel="Cannot select files"
/>

Custom Styling

Drop files here or click to browse

svelte

<FileUpload 
  class="border-2 border-dashed border-primary-500 dark:border-primary-400 rounded-xl p-8"
  dropzoneLabel="Drop files here or click to browse"
  browseLabel="Select Files"
/>

With Auto Upload

Drop files here or click to browse

svelte

<FileUpload 
  dropzoneLabel="Drop files here or click to browse"
  browseLabel="Select Files"
  autoUpload
  uploadUrl="/api/upload"
  onsuccess={(e) => console.log('Upload successful', e.detail)}
  onerror={(e) => console.log('Upload failed', e.detail.errors)}
  onprogress={(e) => console.log('Progress:', e.detail.progress)}
/>

Props

Prop	Type	Default	Description
`accept`	`string`	`""`	File types to accept (e.g., "image/*", ".pdf,.doc")
`multiple`	`boolean`	`true`	Whether to allow multiple file selection
`maxFiles`	`number`	`5`	Maximum number of files allowed
`maxSize`	`number`	`undefined`	Maximum file size in bytes
`disabled`	`boolean`	`false`	Whether the upload is disabled
`showPreviews`	`boolean`	`true`	Whether to show file previews
`autoUpload`	`boolean`	`false`	Whether to automatically upload files after selection
`uploadUrl`	`string`	`undefined`	URL for auto upload functionality
`uploadHeaders`	`Object`	`undefined`	Custom headers for upload requests
`dropzoneLabel`	`string`	`"Drag files here or click to browse"`	Text displayed in the dropzone
`browseLabel`	`string`	`"Browse"`	Text for the browse button
`ariaLabel`	`string`	`"File upload"`	ARIA label for accessibility
`name`	`string`	`undefined`	Name attribute for the file input
`id`	`string`	`random UUID`	HTML id for accessibility
`class`	`string`	`""`	Additional CSS classes

Events

Event	Detail	Description
`change`	`{ files: File[] }`	Fired when selected files change
`error`	`{ errors: Array }`	Fired when validation or upload errors occur
`progress`	`{ progress: number, files: File[] }`	Fired during upload to indicate progress (0-100)
`success`	`{ response: any, files: File[] }`	Fired when upload completes successfully

Snippets

Snippet	Props	Description
`dropzone`	None	Custom dropzone content
`previews`	`{ files: File[], removeFile: (index: number) => void }`	Custom file previews template

Accessibility

The FileUpload component follows accessibility best practices:

Uses native <input type="file"> for keyboard and screen reader accessibility
Provides clear instructions for drag-and-drop and browse options
Uses proper ARIA attributes for the dropzone
Provides visual feedback for drag-and-drop interactions
Communicates errors and validation issues clearly
Shows progress information during uploads

Keyboard Support

Key	Function
`Tab`	Moves focus to the file input
`Enter` or `Space`	When focus is on the dropzone, opens the file browser
`Enter` or `Space`	When focus is on a file delete button, removes the file