# File Upload

URL: https://ark-ui.com/docs/components/file-upload
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/file-upload.mdx

A component that is used to upload multiple files.

---

<ComponentPreview id="FileUpload" />

## Anatomy

To set up the file upload component correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="file-upload" />

## Examples

Learn how to use the `FileUpload` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Initial Files

Use the `defaultAcceptedFiles` prop to set the initial files in the file upload component.

<Example id="initial-files" />

### Clear Trigger

Use the `ClearTrigger` component to provide users with a way to remove all uploaded files at once. This trigger will
clear both accepted and rejected files from the upload component.

<Example id="clear-trigger" />

### Drag & Drop

Use the `Dropzone` component to enable drag-and-drop functionality. The dropzone provides adds a `data-dragging`
attribute while dragging for styling purposes.

<Example id="drag-and-drop" />

### Directory Upload

Use the `directory` prop to allow users to upload entire folders. This enables selecting multiple files from a directory
structure while preserving the folder hierarchy.

<Example id="directory-upload" />

The `file.webkitRelativePath` property contains the full path of each file within the uploaded directory, allowing you
to display the folder structure or process files based on their location.

> **Important**: When uploading directories with many files, set `maxFiles` to a higher value (e.g., `maxFiles={100}`)
> or remove the limit entirely to prevent files from being rejected due to the default file count restriction.

### Accepted File Types

Use the `accept` prop to restrict the file types that can be uploaded. This prop accepts MIME types (e.g., `image/png`,
`image/jpeg`) or file extensions (e.g., `.pdf`, `.txt`).

When users attempt to upload files that don't match the accepted types, these files will be automatically rejected and
appear in the `rejectedFiles` array with a `FILE_INVALID_TYPE` error code.

<Example id="accepted-file-types" />

### Error Handling

The `FileUpload` component provides comprehensive validation and error handling capabilities. You can set various
constraints and handle different types of validation errors:

**Built-in Validation Props:**

- `maxFiles` - Maximum number of files allowed
- `maxFileSize` - Maximum file size in bytes
- `minFileSize` - Minimum file size in bytes
- `accept` - Allowed MIME types or file extensions

**Built-in Error Types:**

- `TOO_MANY_FILES` - Exceeds maxFiles limit
- `FILE_INVALID_TYPE` - File type not in accept list
- `FILE_TOO_LARGE` - File size exceeds maxFileSize
- `FILE_TOO_SMALL` - File size below minFileSize
- `FILE_INVALID` - Generic validation failure
- `FILE_EXISTS` - Duplicate file detected

<Example id="error-handling" />

### File Transformations

Use the `transformFiles` prop to process files before they're added to the accepted files list. This is useful for file
compression, format conversion, or adding metadata.

**Common transformation use cases:**

- **Image compression**: Use `image-conversion`, `browser-image-compression`, or similar libraries
- **Format conversion**: Convert files to different formats (e.g., HEIC to JPEG)
- **Metadata extraction**: Add EXIF data or other file information
- **File validation**: Perform additional checks beyond basic validation
- **Resizing**: Automatically resize images to specific dimensions

<Example id="file-transformations" />

### Custom Validation

Use the `validate` prop to implement custom validation logic beyond the built-in constraints.

<Example id="validation" />

### Field

Here's an example of how to use the `FileUpload` component with the `Field` component to provide a error and helper
text.

<Example id="with-field" />

### Root Provider

Use the `useFileUpload` hook to create the file upload store and pass it to the `RootProvider` component. This allows
you to have maximum control over the file upload programmatically.

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

<Example id="root-provider" />

### Pasting Files

Use the `setClipboardFiles` method to enable pasting images directly from the clipboard.

> You can access the `fileUpload` store from `FileUpload.Context` as well.

<Example id="with-paste" />

## Guides

### File Previews

The `FileUpload` component provides flexible preview options for different file types. Use `ItemPreview` with type
matching to show appropriate previews based on file format.

**Preview Types:**

- `type="image/*"`: Shows image thumbnails using `ItemPreviewImage`
- `type="video/*"`: For video file previews
- `type="application/pdf"`: For PDF files
- `type=".*"`: Generic fallback for any file type

```tsx
<FileUpload.ItemPreview type="image/*">
  <FileUpload.ItemPreviewImage />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type="video/*">
  <VideoIcon />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type="application/pdf">
  <PdfIcon />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type=".*">
  <FileIcon />
</FileUpload.ItemPreview>
```

**File Metadata Display:**

- `ItemName` - Shows the file name
- `ItemSizeText` - Shows formatted file size (e.g., "2.5 MB")

### Disable dropzone

To disable drag-and-drop functionality, set the `allowDrop` prop to `false`.

```tsx
<FileUpload.Root allowDrop={false}>{/* ... */}</FileUpload.Root>
```

### Prevent document drop

By default, when the dropzone is active, we prevent accidental navigation when files are dropped outside the dropzone.
To prevent this behavior, set the `preventDocumentDrop` prop to `false`.

```tsx
<FileUpload.Root preventDocumentDrop={false}>{/* ... */}</FileUpload.Root>
```

### Prevent double open

When you want to delegate clicking to the trigger and remove the dropzone from the tab order, you can use the
`disableClick` prop. This prevents the the file picker from opening twice.

```tsx
<FileUpload.Dropzone disableClick>
  <FileUpload.Trigger>Choose Files</FileUpload.Trigger>
  Drag files here
</FileUpload.Dropzone>
```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `accept` | `Record<string, string[]> | FileMimeType | FileMimeType[]` | No | The accept file types |
| `acceptedFiles` | `File[]` | No | The controlled accepted files |
| `allowDrop` | `boolean` | No | Whether to allow drag and drop in the dropzone element |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `capture` | `'user' | 'environment'` | No | The default camera to use when capturing media |
| `defaultAcceptedFiles` | `File[]` | No | The default accepted files when rendered.
Use when you don't need to control the accepted files of the input. |
| `directory` | `boolean` | No | Whether to accept directories, only works in webkit browsers |
| `disabled` | `boolean` | No | Whether the file input is disabled |
| `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
}>` | No | The ids of the elements. Useful for composition. |
| `invalid` | `boolean` | No | Whether the file input is invalid |
| `locale` | `string` | No | The current locale. Based on the BCP 47 definition. |
| `maxFiles` | `number` | No | The maximum number of files |
| `maxFileSize` | `number` | No | The maximum file size in bytes |
| `minFileSize` | `number` | No | The minimum file size in bytes |
| `name` | `string` | No | The name of the underlying file input |
| `onFileAccept` | `(details: FileAcceptDetails) => void` | No | Function called when the file is accepted |
| `onFileChange` | `(details: FileChangeDetails) => void` | No | Function called when the value changes, whether accepted or rejected |
| `onFileReject` | `(details: FileRejectDetails) => void` | No | Function called when the file is rejected |
| `preventDocumentDrop` | `boolean` | No | Whether to prevent the drop event on the document |
| `required` | `boolean` | No | Whether the file input is required |
| `transformFiles` | `(files: File[]) => Promise<File[]>` | No | Function to transform the accepted files to apply transformations |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `validate` | `(file: File, details: FileValidateDetails) => FileError[] | null` | No | Function to validate a file |


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ClearTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | clear-trigger |
| `[data-disabled]` | Present when disabled |


**Dropzone Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disableClick` | `boolean` | No | Whether to disable the click event on the dropzone |


**Dropzone Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemDeleteTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemDeleteTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-delete-trigger |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `type` | `ItemType` | No |  |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-group |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemName Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemName Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-name |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreviewImage Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemPreviewImage Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview-image |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `type` | `string` | No | The file type to match against. Matches all file types by default. |


**ItemPreview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `file` | `File` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemSizeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemSizeText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-size-text |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseFileUploadReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | trigger |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `accept` | `Record<string, string[]> | FileMimeType | FileMimeType[]` | No | The accept file types |
| `acceptedFiles` | `File[]` | No | The controlled accepted files |
| `allowDrop` | `boolean` | No | Whether to allow drag and drop in the dropzone element |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `capture` | `'user' | 'environment'` | No | The default camera to use when capturing media |
| `defaultAcceptedFiles` | `File[]` | No | The default accepted files when rendered.
Use when you don't need to control the accepted files of the input. |
| `directory` | `boolean` | No | Whether to accept directories, only works in webkit browsers |
| `disabled` | `boolean` | No | Whether the file input is disabled |
| `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
}>` | No | The ids of the elements. Useful for composition. |
| `invalid` | `boolean` | No | Whether the file input is invalid |
| `locale` | `string` | No | The current locale. Based on the BCP 47 definition. |
| `maxFiles` | `number` | No | The maximum number of files |
| `maxFileSize` | `number` | No | The maximum file size in bytes |
| `minFileSize` | `number` | No | The minimum file size in bytes |
| `name` | `string` | No | The name of the underlying file input |
| `onFileAccept` | `(details: FileAcceptDetails) => void` | No | Function called when the file is accepted |
| `onFileChange` | `(details: FileChangeDetails) => void` | No | Function called when the value changes, whether accepted or rejected |
| `onFileReject` | `(details: FileRejectDetails) => void` | No | Function called when the file is rejected |
| `preventDocumentDrop` | `boolean` | No | Whether to prevent the drop event on the document |
| `required` | `boolean` | No | Whether the file input is required |
| `transformFiles` | `(files: File[]) => Promise<File[]>` | No | Function to transform the accepted files to apply transformations |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `validate` | `(file: File, details: FileValidateDetails) => FileError[] | null` | No | Function to validate a file |


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ClearTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | clear-trigger |
| `[data-disabled]` | Present when disabled |


**Dropzone Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disableClick` | `boolean` | No | Whether to disable the click event on the dropzone |


**Dropzone Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemDeleteTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemDeleteTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-delete-trigger |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'ul'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `type` | `ItemType` | No |  |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-group |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemName Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemName Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-name |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreviewImage Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'img'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemPreviewImage Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview-image |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `type` | `string` | No | The file type to match against. Matches all file types by default. |


**ItemPreview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `file` | `File` | Yes |  |
| `asChild` | `(props: ParentProps<'li'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemSizeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemSizeText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-size-text |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseFileUploadReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | trigger |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `accept` | `Record<string, string[]> | FileMimeType | FileMimeType[]` | No | The accept file types |
| `allowDrop` | `boolean` | No | Whether to allow drag and drop in the dropzone element |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `capture` | `'user' | 'environment'` | No | The default camera to use when capturing media |
| `defaultAcceptedFiles` | `File[]` | No | The default accepted files |
| `directory` | `boolean` | No | Whether to accept directories, only works in webkit browsers |
| `disabled` | `boolean` | No | Whether the file input is disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `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
}>` | No | The ids of the elements. Useful for composition. |
| `invalid` | `boolean` | No | Whether the file input is invalid |
| `locale` | `string` | No | The current locale. Based on the BCP 47 definition. |
| `maxFiles` | `number` | No | The maximum number of files |
| `maxFileSize` | `number` | No | The maximum file size in bytes |
| `minFileSize` | `number` | No | The minimum file size in bytes |
| `name` | `string` | No | The name of the underlying file input |
| `preventDocumentDrop` | `boolean` | No | Whether to prevent the drop event on the document |
| `required` | `boolean` | No | Whether the file input is required |
| `transformFiles` | `(files: File[]) => Promise<File[]>` | No | Function to transform the files |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `validate` | `(file: File, details: FileValidateDetails) => FileError[] | null` | No | Function to validate a file |


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ClearTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | clear-trigger |
| `[data-disabled]` | Present when disabled |


**Dropzone Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disableClick` | `boolean` | No | Whether to disable the click event on the dropzone |


**Dropzone Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemDeleteTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemDeleteTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-delete-trigger |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `type` | `ItemType` | No |  |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-group |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemName Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemName Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-name |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreviewImage Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemPreviewImage Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview-image |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `type` | `string` | No | The file type to match against. Matches all file types by default. |


**ItemPreview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `file` | `File` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `type` | `ItemType` | No |  |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemSizeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemSizeText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-size-text |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `FileUploadApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | trigger |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `accept` | `Record<string, string[]> | FileMimeType | FileMimeType[]` | No | The accept file types |
| `acceptedFiles` | `File[]` | No | The controlled accepted files |
| `allowDrop` | `boolean` | No | Whether to allow drag and drop in the dropzone element |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `capture` | `'user' | 'environment'` | No | The default camera to use when capturing media |
| `defaultAcceptedFiles` | `File[]` | No | The default accepted files when rendered.
Use when you don't need to control the accepted files of the input. |
| `directory` | `boolean` | No | Whether to accept directories, only works in webkit browsers |
| `disabled` | `boolean` | No | Whether the file input is disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `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
}>` | No | The ids of the elements. Useful for composition. |
| `invalid` | `boolean` | No | Whether the file input is invalid |
| `locale` | `string` | No | The current locale. Based on the BCP 47 definition. |
| `maxFiles` | `number` | No | The maximum number of files |
| `maxFileSize` | `number` | No | The maximum file size in bytes |
| `minFileSize` | `number` | No | The minimum file size in bytes |
| `name` | `string` | No | The name of the underlying file input |
| `onFileAccept` | `(details: FileAcceptDetails) => void` | No | Function called when the file is accepted |
| `onFileChange` | `(details: FileChangeDetails) => void` | No | Function called when the value changes, whether accepted or rejected |
| `onFileReject` | `(details: FileRejectDetails) => void` | No | Function called when the file is rejected |
| `preventDocumentDrop` | `boolean` | No | Whether to prevent the drop event on the document |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | Whether the file input is required |
| `transformFiles` | `(files: File[]) => Promise<File[]>` | No | Function to transform the accepted files to apply transformations |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `validate` | `(file: File, details: FileValidateDetails) => FileError[] | null` | No | Function to validate a file |


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ClearTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | clear-trigger |
| `[data-disabled]` | Present when disabled |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseFileUploadContext]>` | No |  |


**Dropzone Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disableClick` | `boolean` | No | Whether to disable the click event on the dropzone |
| `ref` | `Element` | No |  |


**Dropzone Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemDeleteTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemDeleteTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-delete-trigger |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `type` | `ItemType` | No |  |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-group |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemName Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemName Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-name |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreviewImage Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'img'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemPreviewImage Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview-image |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemPreview Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `type` | `string` | No | The file type to match against. Matches all file types by default. |


**ItemPreview Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-preview |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `file` | `File` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'li'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**ItemSizeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemSizeText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | item-size-text |
| `[data-disabled]` | Present when disabled |
| `[data-type]` | The type of the item |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseFileUploadReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | file-upload |
| `[data-part]` | trigger |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |


### Context

These are the properties available when using `UfileUupload.Context`, `useUfileUuploadContext` hook or `useUfileUupload` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `dragging` | `boolean` | Whether the user is dragging something over the root element |
| `focused` | `boolean` | Whether the user is focused on the dropzone element |
| `disabled` | `boolean` | Whether the file input is disabled |
| `transforming` | `boolean` | Whether files are currently being transformed via `transformFiles` |
| `openFilePicker` | `VoidFunction` | Function to open the file dialog |
| `deleteFile` | `(file: File, type?: ItemType) => void` | Function to delete the file from the list |
| `acceptedFiles` | `File[]` | The accepted files that have been dropped or selected |
| `rejectedFiles` | `FileRejection[]` | The files that have been rejected |
| `setFiles` | `(files: File[]) => void` | Sets the accepted files |
| `clearFiles` | `VoidFunction` | Clears the accepted files |
| `clearRejectedFiles` | `VoidFunction` | Clears the rejected files |
| `getFileSize` | `(file: File) => string` | Returns the formatted file size (e.g. 1.2MB) |
| `createFileUrl` | `(file: File, cb: (url: string) => void) => VoidFunction` | Returns the preview url of a file.
Returns a function to revoke the url. |
| `setClipboardFiles` | `(dt: DataTransfer) => boolean` | Sets the clipboard files
Returns `true` if the clipboard data contains files, `false` otherwise. |