# File Upload
A component for uploading files with drag-and-drop and browse support.
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Label
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
);
}
```
## Custom Content
Supply your own text and icons within the dropzone.
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
import { FileIcon } from 'lucide-react';
export default function Default() {
return (
Select file or drag here.
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
);
}
```
## Disabled
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Disabled() {
return (
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
);
}
```
## Button Only
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Button() {
return (
Browse Files
);
}
```
## Clear Files
Use the [Provider Pattern](/docs/get-started/fundamentals#provider-pattern) to gain access to the `clearFiles` method.
```tsx
import { FileUpload, useFileUpload } from '@skeletonlabs/skeleton-react';
export default function ClearFiles() {
const fileUpload = useFileUpload({
defaultAcceptedFiles: [new File(['file'], 'example.png', { type: 'image/png' })],
});
return (
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
);
}
```
## Direction
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Label
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
);
}
```
## 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 | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | FileUploadApi\ |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | (fileUpload: FileUploadApi\) => ReactNode |
| element | - | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"ul">) => Element) \| undefined — Render the element yourself |
| file | - | File |
| type | - | ItemType \| undefined |
| element | - | ((attributes: HTMLAttributes\<"li">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined — Render the element yourself |