# File Upload
File upload dropzone and input patterns for selecting files.
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
import { FileIcon } from 'lucide-react';
export default function Default() {
return (
Upload your files
Select file or drag here.
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
Clear Files
);
}
```
## Disabled
Set the `disabled` prop to enable the disabled state.
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Disabled() {
return (
Upload your files
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
);
}
```
## Button Only
Replace the interface with a simple "browse" button.
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Button() {
return (
Browse Files
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Upload your files
Browse Files
{(fileUpload) =>
fileUpload.acceptedFiles.map((file) => (
{file.name}
{file.size} bytes
))
}
);
}
```
## Anatomy
Here's an overview of how the FileUpload component is structured in code:
```tsx
import { FileUpload } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference