File Upload

A component for selecting and uploading files from the user's device

Drag your file(s) here

Anatomy

Usage

<script>
  import {FileUpload} from 'ui-ingredients';
  import {XCloseIcon} from '$lib/icons';
</script>

<FileUpload.Root maxFiles={3}>
  {#snippet children(context)}
    <FileUpload.Dropzone>
      Drag your file(s) here

      <FileUpload.HiddenInput />
      <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
    </FileUpload.Dropzone>

    <FileUpload.ItemGroup>
      {#each context.acceptedFiles as file}
        <FileUpload.Item {file}>
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemPreview>
            <FileUpload.ItemPreviewImage />
          </FileUpload.ItemPreview>
          <FileUpload.ItemDeleteTrigger>
            <XCloseIcon />
          </FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      {/each}
    </FileUpload.ItemGroup>
  {/snippet}
</FileUpload.Root>

Usage with Field component

<script>
  import {FileUpload, Field} from 'ui-ingredients';
  import {XCloseIcon} from '$lib/icons';
</script>

<Field.Root>
  <FileUpload.Root maxFiles={3}>
    {#snippet children(context)}
      <FileUpload.Dropzone>
        Drag your file(s) here

        <FileUpload.HiddenInput />
        <FileUpload.Trigger>Browse Files</FileUpload.Trigger>
      </FileUpload.Dropzone>

      <FileUpload.ItemGroup>
        {#each context.acceptedFiles as file}
          <FileUpload.Item {file}>
            <FileUpload.ItemName />
            <FileUpload.ItemSizeText />
            <FileUpload.ItemPreview>
              <FileUpload.ItemPreviewImage />
            </FileUpload.ItemPreview>
            <FileUpload.ItemDeleteTrigger>
              <XCloseIcon />
            </FileUpload.ItemDeleteTrigger>
          </FileUpload.Item>
        {/each}
      </FileUpload.ItemGroup>
    {/snippet}
  </FileUpload.Root>

  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

API Reference

Root

Prop	Default	Description
`accept`		`Record<string, string[]> \| FileMimeType[]` The accept file types
`allowDrop`	`true`	`boolean` Whether to allow drag and drop in the dropzone element
`capture`		`"user" \| "environment"` The default camera to use when capturing media
`directory`		`boolean` Whether to accept directories, only works in webkit browsers
`disabled`		`boolean` Whether the file input is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`{ 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; }` The ids of the elements. Useful for composition.
`invalid`		`boolean` Whether the file input is invalid
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`maxFiles`	`1`	`number` The maximum number of files
`maxFileSize`	`Infinity`	`number` The maximum file size in bytes
`minFileSize`	`0`	`number` The minimum file size in bytes
`name`		`string` The name of the underlying file input
`onFileAccept`		`(details: FileAcceptDetails) => void` Function called when the file is accepted
`onFileChange`		`(details: FileChangeDetails) => void` Function called when the value changes, whether accepted or rejected
`onFileReject`		`(details: FileRejectDetails) => void` Function called when the file is rejected
`preventDocumentDrop`	`true`	`boolean` Whether to prevent the drop event on the document
`required`		`boolean` Whether the file input is required
`translations`		`IntlTranslations` The localized messages to use.
`validate`		`(file: File, details: FileValidateDetails) => FileError[]` Function to validate a file
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-dragging`	Present when in the dragging state
`data-part`	root
`data-scope`	file-upload

ClearTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	clear-trigger
`data-scope`	file-upload

Dropzone

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-dragging`	Present when in the dragging state
`data-invalid`	Present when invalid
`data-part`	dropzone
`data-scope`	file-upload

HiddenInput

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Item

Prop	Default	Description
`file`		`File` The file object.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	item
`data-scope`	file-upload

ItemDeleteTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	item-delete-trigger
`data-scope`	file-upload

ItemGroup

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	item-group
`data-scope`	file-upload

ItemName

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	item-name
`data-scope`	file-upload

ItemPreview

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	item-preview
`data-scope`	file-upload

ItemPreviewImage

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	item-preview-image
`data-scope`	file-upload

ItemSizeText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	item-size-text
`data-scope`	file-upload

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	label
`data-scope`	file-upload

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	trigger
`data-scope`	file-upload