File uploader

FileUploader accepts files via drag-and-drop or a Choose file button. It validates accepted extensions, shows per-file progress, and lets the caller plug in a serviceHandler for upload requests.

Drag-and-drop file uploader with progress, validation, and a file list

Installation

npx shadcn@latest add @dr-ui/file-uploader

Registry dependencies

@dr-ui/utils

@dr-ui/i18n

@dr-ui/button

@dr-ui/label

@dr-ui/message

@dr-ui/progress

Dependencies

lucide-react@^1.7.0

Basic

Single-file uploader with drag-and-drop and a Choose file button.

Drop file(s) here to upload or

Multiple files

Accept multiple files at once with file-type validation and accepted formats hint.

Upload datasets

Drop one or more files to upload.

Drop file(s) here to upload orAccepted formats: .tar, .gz, .zip, .mlpkg

Required field

Mark the field as required and pass isTouched after submit to surface a validation error when no file is selected.

Dataset file

Upload the dataset to start the run.

Drop file(s) here to upload or

With progress bar

Drive each file's progress externally via progressBarFiles.

Drop file(s) here to upload or