# File Upload
A component for uploading files with drag-and-drop and browse support.

```tsx
// Error loading file, please report this issue.
```

## Custom Content

Supply your own text and icons within the dropzone.

```tsx
// Error loading file, please report this issue.
```

## Disabled

```tsx
// Error loading file, please report this issue.
```

## Button Only

```tsx
// Error loading file, please report this issue.
```

## Clear Files



Use the `Provider` pattern to access the `clearFiles` method.

```tsx
// Error loading file, please report this issue.
```

## Direction

```tsx
// Error loading file, please report this issue.
```

## API Reference

### FileUploadRoot

| Property | Type | Description |
| --- | --- | --- |
| `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` | boolean, undefined | Whether to allow drag and drop in the dropzone element Default: true |
| `maxFileSize` | number, undefined | The maximum file size in bytes Default: Infinity |
| `minFileSize` | number, undefined | The minimum file size in bytes Default: 0 |
| `maxFiles` | number, undefined | The maximum number of files Default: 1 |
| `preventDocumentDrop` | boolean, undefined | Whether to prevent the drop event on the document Default: true |
| `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` | string, undefined | The current locale. Based on the BCP 47 definition. Default: "en-US" |
| `dir` | "ltr", "rtl", undefined | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | (() => ShadowRoot, Node, Document), undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `element` | ((attributes: HTMLAttributes<"div">) => Element), undefined | Render the element yourself |

### FileUploadRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | FileUploadApi<PropTypes> |  |
| `element` | ((attributes: HTMLAttributes<"div">) => Element), undefined | Render the element yourself |

### FileUploadRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | (fileUpload: FileUploadApi<PropTypes>) => ReactNode |  |

### FileUploadLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"label">) => Element), undefined | Render the element yourself |

### FileUploadDropzone

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element), undefined | Render the element yourself |

### FileUploadTrigger

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"button">) => Element), undefined | Render the element yourself |

### FileUploadHiddenInput

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"input">) => Element), undefined | Render the element yourself |

### FileUploadItemGroup

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"ul">) => Element), undefined | Render the element yourself |

### FileUploadItem

| Property | Type | Description |
| --- | --- | --- |
| `file`* | File |  |
| `type` | ItemType, undefined |  |
| `element` | ((attributes: HTMLAttributes<"li">) => Element), undefined | Render the element yourself |

### FileUploadItemName

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element), undefined | Render the element yourself |

### FileUploadItemSizeText

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element), undefined | Render the element yourself |

### FileUploadItemDeleteTrigger

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"button">) => Element), undefined | Render the element yourself |