File upload patterns handle transfer state, progress, and validation for attached files.
Loading demo: file-upload-real-world
npx sdaia-ui@latest add file-upload
import { FileUpload } from "@/components/ui/fileuploader"Drag-and-drop upload area with a browse button and upload progress indicator.
Loading demo: file-upload-default
When an upload fails, the row surfaces an error message and a retry action.
Loading demo: file-upload-error
Props for the FileUploadBase component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | 'Choose a file or drag & drop it here.' | optional |
helperText | ReactNode | 'JPEG, PNG, PDF, and GIF formats, up to 2MB' | optional |
showHelperText | boolean | true | optional |
showBrowseButton | boolean | true | optional |
browseLabel | ReactNode | 'Browse file' | optional |
disabled | boolean | false | optional |
active | boolean | false | optional |
onBrowse | MouseEventHandler<HTMLButtonElement> | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
rtl | boolean | false (deprecated) | optional |