---
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>

## File uploader (button-only)

By default, the file uploader only accepts one file.

Set `multiple` to `true` for multiple files to be accepted.

<FileUploaderButton labelText="Add file" />

## Multiple files

<FileUploaderButton multiple labelText="Add files" />

## Custom button kind, size

By default, the `primary` small button kind is used.

Use the `kind` and `size` props to customize the 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` wraps `FileUploaderButton` and lists out uploaded files.

The example below accepts multiple files with an extension of `.jpg` or `.jpeg`. It sets the status to `"complete"`; by default, the status is `"loading"`.

See the [item examples below](#item-uploading) for different statuses.

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

## Clear files

There are two ways to clear files in `FileUploader`:

<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)

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

## Item (uploading)

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

## Item (complete)

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

## Item (edit)

If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.

The event detail contains the item `id`.

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

## Item (edit status, invalid state)

An item can also have an edit status with an invalid state.

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

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

Use the `errorSubject` and `errorBody` props to customize the error message.

<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

The default `FileUploaderItem` 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

The `FileUploaderDropContainer` accepts files through click and drop events.

Use the `validateFiles` prop to filter out files before they are set.

The following example accepts files smaller than 1 kB.

<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

<FileUploaderSkeleton />