File Upload
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { FileUpload } from "@corew500/ui/file-upload"
<FileUpload>Content</FileUpload>Variants
fileUploadVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
dropzoneVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultoutline | default |
| isDragActive | truefalse | false |
| disabled | truefalse | false |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| accept | string | — | Accepted file types (e.g., "image/*", ".pdf,.doc") |
| maxSize | number | — | Maximum file size in bytes |
| maxFiles | number | — | Maximum number of files |
| multiple | enum | true | Allow multiple files |
| disabled | enum | false | Disabled state |
| value | FileUploadFile[] | — | Current files (controlled) |
| onFilesChange | (files: FileUploadFile[]) => void | — | Called when files change |
| onError | (error: FileUploadError) => void | — | Called when an error occurs |
| size | enum | — | — |
Accessibility
Keyboard Navigation
- - File input is keyboard accessible via native input element
Screen Readers
- Dropzone announces drag state to screen readers
- File list includes proper ARIA labels for remove buttons
- Upload progress communicated via aria-valuenow attributes
Localization
Translatable Content
- - Pass translated strings to FileUploadLabel and FileUploadTrigger
Locale-Specific Formatting
- File size formatting can be customized via formatFileSize utility
Additional
- Error messages should be localized before passing to onError callback