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(event.details.acceptedFiles[0]);
}

<FileUpload onFileChange={generatePreview}>

Miscellaneous

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

API Reference

FileUpload

Property	Type	Description
`label`	string	Set the interface text value.
`subtext`	string	Set the interface subtext value.
`base`	string	Set root base classes
`classes`	string	Set root arbitrary classes
`interfaceBase`	string	Set interface base classes
`interfaceBg`	string	Set interface background classes
`interfaceBorder`	string	Set interface border classes
`interfaceBorderColor`	string	Set interface border color classes
`interfacePadding`	string	Set interface border classes
`interfaceRounded`	string	Set interface border radius classes
`interfaceClasses`	string	Set interface arbitrary classes
`interfaceIcon`	string	Set interface icon classes
`interfaceText`	string	Set interface text classes
`interfaceSubtext`	string	Set interface subtext classes
`filesListBase`	string	Set file list base classes
`filesListClasses`	string	Set file list arbitrary classes
`fileBase`	string	Set file base classes
`fileBg`	string	Set file background classes
`fileGap`	string	Set file gap classes
`filePadding`	string	Set file padding classes
`fileRounded`	string	Set file border-radius classes
`fileClasses`	string	Set file arbitrary classes
`fileIcon`	string	Set file icon classes
`fileName`	string	Set file name classes
`fileSize`	string	Set file size classes
`fileButton`	string	Set file button classes
`stateDisabled`	string	Set disabled state classes for the root.
`stateInvalid`	string	Set invalid state classes for the interface.
`stateDragging`	string	Set dragging state classes for the interface.
`children`	Snippet<[]>	The default children content.
`iconInterface`	Snippet<[]>	Provide an icon for the interface.
`iconFile`	Snippet<[]>	Provide an icon proceeding each file.
`iconFileRemove`	Snippet<[]>	Provide an icon for the remove file action.
`internalApi`		Binds the Zag API for external use.
`name`	string	The name of the underlying file input
`ids`		The ids of the elements. Useful for composition.
`translations`		The localized messages to use.
`accept`	Record<string, string[]> \| FileMimeType \| FileMimeType[]	The accept file types
`disabled`	boolean	Whether the file input is disabled
`required`	boolean	Whether the file input is required
`allowDrop`	boolean	Whether to allow drag and drop in the dropzone element Default: true
`maxFileSize`	number	The maximum file size in bytes Default: Infinity
`minFileSize`	number	The minimum file size in bytes Default: 0
`maxFiles`	number	The maximum number of files Default: 1
`validate`		Function to validate a file
`onFileChange`		Function called when the value changes, whether accepted or rejected
`onFileAccept`		Function called when the file is accepted
`onFileReject`		Function called when the file is rejected
`capture`	"user" \| "environment"	The default camera to use when capturing media
`directory`	boolean	Whether to accept directories, only works in webkit browsers
`invalid`	boolean	Whether the file input is invalid
`locale`	string	The current locale. Based on the BCP 47 definition. Default: "en-US"
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.