# File Upload
A component for uploading files with drag-and-drop and browse support.
```svelte
Label
Browse Files
{#snippet children(fileUpload)}
{#each fileUpload().acceptedFiles as file (file.name)}
{file.name}
{file.size} bytes
{/each}
{/snippet}
```
## Custom Content
Supply your own text and icons within the dropzone.
```svelte
Select file or drag here.
Browse Files
{#snippet children(fileUpload)}
{#each fileUpload().acceptedFiles as file (file.name)}
{file.name}
{file.size} bytes
{/each}
{/snippet}
```
## Disabled
```svelte
Browse Files
{#snippet children(fileUpload)}
{#each fileUpload().acceptedFiles as file (file.name)}
{file.name}
{file.size} bytes
{/each}
{/snippet}
```
## Button Only
```svelte
Browse Files
```
## Clear Files
Use the [Provider Pattern](/docs/get-started/fundamentals#provider-pattern) to gain access to the `clearFiles` method.
```svelte
Browse Files
{#snippet children(fileUpload)}
{#each fileUpload().acceptedFiles as file (file.name)}
{file.name}
{file.size} bytes
{/each}
{/snippet}
fileUpload().clearFiles()}>Clear Files
```
## Direction
```svelte
Label
Browse Files
{#snippet children(fileUpload)}
{#each fileUpload().acceptedFiles as file (file.name)}
{file.name}
{file.size} bytes
{/each}
{/snippet}
```
## API Reference
| Property | Default | Type |
| -------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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\ \| 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 | true | boolean \| undefined — Whether to allow drag and drop in the dropzone element |
| maxFileSize | Infinity | number \| undefined — The maximum file size in bytes |
| minFileSize | 0 | number \| undefined — The minimum file size in bytes |
| maxFiles | 1 | number \| undefined — The maximum number of files |
| preventDocumentDrop | true | boolean \| undefined — Whether to prevent the drop event on the document |
| 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\) \| undefined — Function to transform the accepted files to apply transformations |
| locale | "en-US" | string \| undefined — The current locale. Based on the BCP 47 definition. |
| dir | "ltr" | "ltr" \| "rtl" \| undefined — The document's text/writing direction. |
| getRootNode | - | (() => ShadowRoot \| Node \| Document) \| undefined — A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| value | - | () => FileUploadApi\ |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| children | - | Snippet\<\[() => FileUploadApi\]> |
| element | - | Snippet\<\[HTMLAttributes\<"label">]> \| undefined — Render the element yourself |
| disableClick | - | boolean \| undefined — Whether to disable the click event on the dropzone |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"input">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"ul">]> \| undefined — Render the element yourself |
| file | - | File |
| type | - | ItemType \| undefined |
| element | - | Snippet\<\[HTMLAttributes\<"li">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself |