File Upload

A component for uploading files via drag and drop or file selection dialog.

Anatomy 

<script>
  import {
    FileUpload,
    FileUploadRoot,
    FileUploadTrigger,
    FileUploadDropzone,
    FileUploadList,
    FileUploadLabel,
    FileUploadInput,
    FileUploadClearTrigger,
  } from "@saas-ui/svelte/components/file-upload";
</script>

<FileUpload.Root maxFiles={5}>
  <FileUpload.Dropzone>
    <FileUpload.Label>Drop files here</FileUpload.Label>
  </FileUpload.Dropzone>
  <FileUpload.Trigger>Select Files</FileUpload.Trigger>
  <FileUpload.List />
  <FileUpload.ClearTrigger>Clear</FileUpload.ClearTrigger>
</FileUpload.Root>

Examples

Accepted Files Accessibility

Use the accept prop to restrict accepted file types.

Basic Accessibility

Basic file upload with a trigger button.

Clearable Accessibility

Add a clear button with FileUpload.ClearTrigger.

Directory Accessibility

Enable directory selection with the directory prop.

Dropzone Accessibility

Use FileUpload.Dropzone for drag and drop functionality.

Input Accessibility

Use FileUpload.Input for a text input-style file upload.

Media Capture Accessibility

Use the capture prop to access the device camera.

Multiple Files Accessibility

Use maxFiles to allow multiple file uploads.

Props

FileUpload.Root

The file upload container.

Prop Type Default Description
accept Record<string, string[]> - The accepted file types.
allowDrop boolean true Whether to allow drag and drop.
capture "user" | "environment" - The capture mode for mobile devices.
directory boolean false Whether to allow directory selection.
disabled boolean false Whether the file upload is disabled.
invalid boolean false Whether the file upload is invalid.
maxFiles number 1 The maximum number of files.
maxFileSize number - The maximum file size in bytes.
minFileSize number - The minimum file size in bytes.
name string - The name attribute for the hidden input.
required boolean false Whether the file upload is required.
onFileAccept function - Callback when files are accepted.
onFileChange function - Callback when files change.
onFileReject function - Callback when files are rejected.
children Snippet - The content of the file upload.
class string - Additional CSS classes to apply.

FileUpload.Trigger

A button that opens the file selection dialog.

Prop Type Default Description
variant "solid" | "outline" | "ghost" | "surface" | "plain" "outline" The visual style of the trigger button.
size "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" "sm" The size of the trigger button.
colour ColourName "gray" The colour palette of the trigger button.
children Snippet - The content of the trigger button.
class string - Additional CSS classes to apply.

FileUpload.Dropzone

A dropzone area for drag and drop file uploads.

Prop Type Default Description
children Snippet - The content of the dropzone.
class string - Additional CSS classes to apply.

FileUpload.Label

A label for the file upload dropzone.

Prop Type Default Description
children Snippet - The content of the label.
class string - Additional CSS classes to apply.

FileUpload.Input

A text input-style trigger for file selection.

Prop Type Default Description
placeholder string "Select file(s)" Placeholder text when no file is selected.
class string - Additional CSS classes to apply.

FileUpload.List

Displays the list of uploaded files.

Prop Type Default Description
showSize boolean false Whether to show the file size.
clearable boolean false Whether to show a delete button for each file.
class string - Additional CSS classes to apply.

FileUpload.ClearTrigger

A button to clear all uploaded files.

Prop Type Default Description
children Snippet - The content of the clear trigger.
class string - Additional CSS classes to apply.