---
components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer", "FileUploaderItem", "FileUploaderSkeleton"]
---

<script>
  import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, UnorderedList, ListItem } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

The `FileUploader` components provide a complete solution for file uploads, including
a button trigger, drag-and-drop container, and file list display. The components
support various states, file validation, and customization options.

## File uploader (button-only)

Create a simple file upload button using `FileUploaderButton`. By default, it
accepts a single file. Set `multiple` to `true` to allow multiple file selection.

<FileUploaderButton labelText="Add file" />

## Multiple files

Enable multiple file selection by setting the `multiple` prop to `true`. This
allows users to select multiple files at once.

<FileUploaderButton multiple labelText="Add files" />

## Custom button kind, size

Customize the button appearance using the `kind` and `size` props. The default is
a small primary button.

<FileUploaderButton kind="secondary" size="field" />
<FileUploaderButton kind="tertiary" size="default" />
<FileUploaderButton kind="danger" size="lg" />
<FileUploaderButton kind="danger-tertiary" size="xl" />

## File uploader

The `FileUploader` component combines a button trigger with a list of uploaded
files. It supports file type restrictions, multiple file selection, and various
upload states.

This example accepts multiple JPEG files and displays them in a completed state.

<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />

## Clear files

Remove uploaded files from the `FileUploader` component in two ways:

<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
  <ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
  <ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
</UnorderedList>

<FileSource src="/framed/FileUploader/FileUploaderClearFiles" />

## File uploader (disabled state)

Disable the file uploader by setting the `disabled` prop to `true`. This prevents
user interaction with the component.

<FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />

## Item (uploading)

Display a file upload in progress using the `uploading` status. This shows a
loading indicator and the file name.

<FileUploaderItem name="README.md" status="uploading" />

## Item (complete)

Show a successfully uploaded file using the `complete` status. This displays a
checkmark icon next to the file name.

<FileUploaderItem name="README.md" status="complete" />

## Item (edit)

Enable file deletion by setting the status to `"edit"`. Clicking the close icon
dispatches a `delete` event with the item's ID.

<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
  console.log(e.detail); // "readme"
}} />

## Item (edit status, invalid state)

Mark a file as invalid while keeping it editable. This shows an error icon and
allows the user to remove the file.

<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />

## Item (edit status, invalid state with subject, body)

Provide detailed error messages for invalid files using the `errorSubject` and
`errorBody` props. This helps users understand and resolve upload issues.

<FileUploaderItem
  invalid
  id="readme"
  name="README.md"
  errorSubject="File size exceeds 500kb limit"
  errorBody="Please select a new file."
  status="edit"
  on:delete
/>

## Item sizes

Customize the size of file uploader items using the `size` prop. The default size
is "default".

<FileUploaderItem size="default" name="README.md" status="uploading" />
<FileUploaderItem size="field" name="README.md" status="uploading" />
<FileUploaderItem size="small" name="README.md" status="uploading" />

## Drop container

Use `FileUploaderDropContainer` for drag-and-drop file uploads. It supports file
validation and multiple file selection.

This example accepts files smaller than 1 kB and logs the selected files to the
console.

<FileUploaderDropContainer
  multiple
  labelText="Drag and drop files here or click to upload" 
  validateFiles={files => {
    return files.filter(file => file.size < 1_024)
  }}
  on:change={e=> {
    console.log("files", e.detail)
  }}
/>

## Skeleton

Display a loading state using the `FileUploaderSkeleton` component. This provides
visual feedback while the file uploader content is being loaded.

<FileUploaderSkeleton />