File Upload - Skeleton

Label

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

<FileUpload>
  <FileUpload.Label>Label</FileUpload.Label>
  <FileUpload.Dropzone>
    <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
    <FileUpload.HiddenInput />
  </FileUpload.Dropzone>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet children(fileUpload)}
        {#each fileUpload().acceptedFiles as file (file.name)}
          <FileUpload.Item {file}>
            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
            <FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
            <FileUpload.ItemDeleteTrigger />
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
  </FileUpload.ItemGroup>
</FileUpload>

Custom Content

Supply your own text and icons within the dropzone.

Select file or drag here.

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

<FileUpload>
  <FileUpload.Dropzone>
    <FileIcon class="size-10" />
    <span>Select file or drag here.</span>
    <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
    <FileUpload.HiddenInput />
  </FileUpload.Dropzone>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet children(fileUpload)}
        {#each fileUpload().acceptedFiles as file (file.name)}
          <FileUpload.Item {file}>
            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
            <FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
            <FileUpload.ItemDeleteTrigger />
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
  </FileUpload.ItemGroup>
</FileUpload>

Disabled

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

<FileUpload disabled={true}>
  <FileUpload.Dropzone>
    <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
    <FileUpload.HiddenInput />
  </FileUpload.Dropzone>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet children(fileUpload)}
        {#each fileUpload().acceptedFiles as file (file.name)}
          <FileUpload.Item {file}>
            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
            <FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
            <FileUpload.ItemDeleteTrigger />
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
  </FileUpload.ItemGroup>
</FileUpload>

Button Only

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

<FileUpload class="w-fit" onFileAccept={console.log}>
  <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
  <FileUpload.HiddenInput />
</FileUpload>

Clear Files

Use the Provider pattern to access the clearFiles method.

example.png

4 bytes

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

  const id = $props.id();
  const fileUpload = useFileUpload({
    id,
    defaultAcceptedFiles: [new File(['file'], 'example.png', { type: 'image/png' })],
  });
</script>

<div class="grid gap-4 w-full">
  <FileUpload.Provider value={fileUpload}>
    <FileUpload.Dropzone>
      <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
      <FileUpload.HiddenInput />
    </FileUpload.Dropzone>
    <FileUpload.ItemGroup>
      <FileUpload.Context>
        {#snippet children(fileUpload)}
          {#each fileUpload().acceptedFiles as file (file.name)}
            <FileUpload.Item {file}>
              <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
              <FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
              <FileUpload.ItemDeleteTrigger />
            </FileUpload.Item>
          {/each}
        {/snippet}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
  </FileUpload.Provider>

  <button class="btn preset-filled hover:preset-filled-error-500 w-fit" onclick={() => fileUpload().clearFiles()}>Clear Files</button>
</div>

Direction

Label

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

<FileUpload dir="rtl">
  <FileUpload.Label>Label</FileUpload.Label>
  <FileUpload.Dropzone>
    <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
    <FileUpload.HiddenInput />
  </FileUpload.Dropzone>
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {#snippet children(fileUpload)}
        {#each fileUpload().acceptedFiles as file (file.name)}
          <FileUpload.Item {file}>
            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
            <FileUpload.ItemSizeText>{file.size} bytes</FileUpload.ItemSizeText>
            <FileUpload.ItemDeleteTrigger />
          </FileUpload.Item>
        {/each}
      {/snippet}
    </FileUpload.Context>
  </FileUpload.ItemGroup>
</FileUpload>

API Reference

Root

flex flex-col gap-2 w-full data-disabled:disabled

Property	Default	Type
`name`	-	string \| undefined The name of the underlying file input
`ids`	-	Partial<{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item: (id: string) => string; itemName: (id: string) => string; itemSizeText: (id: string) => string; itemPreview: (id: string) => string; }> \| undefined The ids of the elements. Useful for composition.
`translations`	-	IntlTranslations \| undefined The localized messages to use.
`accept`	-	Record<string, string[]> \| FileMimeType \| FileMimeType[] \| undefined The accept file types
`disabled`	-	boolean \| undefined Whether the file input is disabled
`required`	-	boolean \| undefined Whether the file input is required
`allowDrop`	true	boolean \| undefined Whether to allow drag and drop in the dropzone element
`maxFileSize`	Infinity	number \| undefined The maximum file size in bytes
`minFileSize`	0	number \| undefined The minimum file size in bytes
`maxFiles`	1	number \| undefined The maximum number of files
`preventDocumentDrop`	true	boolean \| undefined Whether to prevent the drop event on the document
`validate`	-	((file: File, details: FileValidateDetails) => FileError[] \| null) \| undefined Function to validate a file
`defaultAcceptedFiles`	-	File[] \| undefined The default accepted files when rendered. Use when you don't need to control the accepted files of the input.
`acceptedFiles`	-	File[] \| undefined The controlled accepted files
`onFileChange`	-	((details: FileChangeDetails) => void) \| undefined Function called when the value changes, whether accepted or rejected
`onFileAccept`	-	((details: FileAcceptDetails) => void) \| undefined Function called when the file is accepted
`onFileReject`	-	((details: FileRejectDetails) => void) \| undefined Function called when the file is rejected
`capture`	-	"user" \| "environment" \| undefined The default camera to use when capturing media
`directory`	-	boolean \| undefined Whether to accept directories, only works in webkit browsers
`invalid`	-	boolean \| undefined Whether the file input is invalid
`transformFiles`	-	((files: File[]) => Promise<File[]>) \| undefined Function to transform the accepted files to apply transformations
`locale`	"en-US"	string \| undefined The current locale. Based on the BCP 47 definition.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	() => FileUploadApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => FileUploadApi<PropTypes>]>

Label

label-text

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

Dropzone

card px-4 py-10 border border-dashed border-surface-200-800 flex flex-col justify-center items-center gap-2 data-dragging:preset-tonal

Property	Default	Type
`disableClick`	-	boolean \| undefined Whether to disable the click event on the dropzone
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Trigger

btn preset-filled

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

HiddenInput

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

ItemGroup

flex flex-col gap-2

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"ul">]> \| undefined Render the element yourself

Item

grid grid-cols-[auto_1fr_auto] gap-4 items-center preset-tonal px-4 py-2 rounded

Property	Default	Type
`file`	-	File
`type`	-	ItemType \| undefined
`element`	-	Snippet<[HTMLAttributes<"li">]> \| undefined Render the element yourself

ItemName

text-sm

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemSizeText

text-xs opacity-60

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemDeleteTrigger

btn-icon

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself