FileUpload
File selection with drag-and-drop dropzone
Drop your .csv here, or click to browse. Up to 5 MB each, 10 files per batch.
Columns must match email,first_name,last_name,plan. Download the template.
Accessibility
- Pair the control with a visible label or aria-label and keep helper or error text programmatically associated.
- Preserve expected keyboard entry, selection, and state announcements for the chosen input pattern.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { FileUpload, Field, Label } from '@dryui/ui';
</script>
<Field.Root>
<Label>Attachments</Label>
<FileUpload.Root>
<FileUpload.Dropzone>...</FileUpload.Dropzone>
<FileUpload.Trigger>...</FileUpload.Trigger>
<FileUpload.List>...</FileUpload.List>
<FileUpload.Item>...</FileUpload.Item>
<FileUpload.ItemDelete>...</FileUpload.ItemDelete>
</FileUpload.Root>
</Field.Root>Import options
Root package
ts
import { FileUpload } from '@dryui/ui'Per-component subpath
ts
import { FileUpload } from '@dryui/ui/file-upload'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
FileUpload.Root | |||||
| files | File[] | — | — | — | ✓ |
| accept | string | — | — | — | — |
| multiple | boolean | — | — | — | — |
| maxSize | number | — | — | — | — |
| maxFiles | number | — | — | — | — |
| disabled | boolean | Prevents interaction and applies disabled styling. | — | — | — |
| onFilesChange | ((files: File[]) => void) | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
FileUpload.Dropzone | |||||
| size | smmdlg | Size preset affecting density, spacing, or typography. | 'md' | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
FileUpload.Trigger | |||||
| size | smmdlg | Size preset affecting density, spacing, or typography. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
FileUpload.List | |||||
| size | smmdlg | Size preset affecting density, spacing, or typography. | 'md' | — | — |
| children | Snippet<[{ file: File; index: number }]> | Content rendered inside the component. | — | ✓ | — |
FileUpload.Item | |||||
| size | smmdlg | Size preset affecting density, spacing, or typography. | 'md' | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |
| file | File | — | — | ✓ | — |
| index | number | — | — | ✓ | — |
FileUpload.ItemDelete | |||||
| index | number | — | — | ✓ | — |
| children | Snippet | Content rendered inside the component. | — | — | — |