Drag-and-drop uploader whose dashed border marches on dragover; files slide in with spring progress bars, oversized files show an error and shake the zone, and rows exit sideways when removed.
uploaddropzonedrag and dropprogressfilesform
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/file-upload
Also installs: Button
Usage
usage.tsx
1"use client";
2import * as React from "react";
3import { FileUpload, type UploadFile } from "@/components/blocks/file-upload";
4
5export function Attachments() {
6 const [files, setFiles] = React.useState<UploadFile[]>([]);
7 return (
8 <FileUpload
9 files={files}
10 maxSize={25 * 1024 * 1024}
11 accept="image/*,.pdf"
12 onFilesAdded={(added) => {
13 // start your uploads here and update progress in `files`
14 setFiles((cur) => [...added.map((f) => ({ id: f.name, name: f.name, size: f.size, progress: 0, status: "uploading" as const })), ...cur]);
15 }}
16 onRemove={(id) => setFiles((cur) => cur.filter((f) => f.id !== id))}
17 />
18 );
19}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
files | UploadFile[] | — | Controlled list { id, name, size, progress, status, error? }. When set, the parent owns progress. |
defaultFiles | UploadFile[] | [] | Initial list when uncontrolled. |
simulate | boolean | true | Uncontrolled only: fake upload progress so the block works standalone. |
onFilesAdded | (files: File[]) => void | — | Accepted files from a drop or the picker. |
onRemove | (id: string) => void | — | A row's remove/cancel button was pressed. |
onReject | (file: File, reason: string) => void | — | A file exceeded maxSize. |
maxSize | number | 10485760 | Max bytes per file (10 MB). |
accept | string | — | Passed to the file input. |
multiple | boolean | true | Allow several files at once. |
label / hint | string | — | Drop-zone copy. |
Accessibility
- The drop zone is a focusable button: Enter or Space opens the file picker, so dragging is never required.
- Each upload has a labelled progressbar with aria-valuenow; errors pair a danger colour with an icon and message.
- Remove buttons name the file ("Cancel upload of report.pdf"); the upload count is announced politely.