shadcn/ui gives you Input type="file" and Attachment, a list of files with their upload state, but no place to drop files. Upload Dropzone fills that gap. It's free, it installs with the shadcn CLI, and you hand it one upload function, so files go to S3, Vercel Blob, UploadThing or Supabase Storage with real progress, retry and cancel.
"use client";
import { useRef } from "react";
import { UploadDropzone, type Uploader, type UploadItem } from "@/components/upload-dropzone/UploadDropzone";
type Signed = { url: string; key: string };
const ALLOWED = ["image/png", "image/jpeg", "image/webp", "application/pdf"];
const MAX_SIZE = 10 * 1024 * 1024;
// PUT the file to a URL your server signed. XHR because fetch can't report upload progress.
function putWithProgress(url: string, file: File, onProgress: (pct: number) => void, signal: AbortSignal) {
return new Promise<void>((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("PUT", url);
xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) onProgress((e.loaded / e.total) * 100);
};
xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error(`Storage said ${xhr.status}`)));
xhr.onerror = () => reject(new Error("Network error"));
xhr.onabort = () => reject(new DOMException("Upload cancelled", "AbortError"));
signal.addEventListener("abort", () => xhr.abort(), { once: true });
xhr.send(file);
});
}
export function FileUpload({ onUploaded }: { onUploaded?: (keys: string[]) => void }) {
// which storage key each File ended up under, so onAllDone can report keys
const keys = useRef(new WeakMap<File, string>());
const upload: Uploader = async (file, onProgress, signal) => {
// accept only filters the file picker; dropped files skip it, so check here too
if (!ALLOWED.includes(file.type)) throw new Error("This file type isn't allowed");
const res = await fetch("/api/uploads", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: file.name, type: file.type, size: file.size }),
signal,
});
if (!res.ok) throw new Error("Couldn't get an upload URL");
const { url, key } = (await res.json()) as Signed;
await putWithProgress(url, file, onProgress, signal);
keys.current.set(file, key);
};
const done = (items: UploadItem[]) => {
const uploaded = items.flatMap((i) => (i.file && keys.current.has(i.file) ? [keys.current.get(i.file)!] : []));
onUploaded?.(uploaded);
};
return (
<UploadDropzone
upload={upload}
accept={ALLOWED.join(",")}
maxSize={MAX_SIZE}
title="Drop files here"
hint="PNG, JPG, WEBP or PDF, up to 10 MB each"
chips={["PNG", "JPG", "WEBP", "PDF"]}
onAllDone={done}
/>
);
}Want some of these free?
Day / Night Toggle, Toast Stack and Pricing Switch, plus prompts for Cursor, v0 and Lovable. Enter your email and the kit opens on the next screen.
The handleUpload route and token rules for Vercel Blob
import { upload } from "@vercel/blob/client";
import type { Uploader } from "@/components/upload-dropzone/UploadDropzone";
// Vercel Blob client upload. /api/blob/upload is the handleUpload route from our Vercel Blob guide.
// onStored gets the blob URL for each file once it's saved.
export function blobUploader(onStored: (file: File, url: string) => void): Uploader {
return async (file, onProgress, signal) => {
const blob = await upload(file.name, file, {
access: "public",
handleUploadUrl: "/api/blob/upload",
onUploadProgress: ({ percentage }) => onProgress(percentage),
abortSignal: signal,
});
onStored(file, blob.url);
};
}Upload progress with a Next.js server action
"use client";
import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { UploadDropzone, type UploadItem } from "@/components/upload-dropzone/UploadDropzone";
import { blobUploader } from "@/components/blob-uploader";
type Values = { title: string; files: string[] };
export function UploadForm({ onSave }: { onSave: (values: Values) => Promise<void> }) {
const [busy, setBusy] = useState(false);
const urls = useRef(new WeakMap<File, string>());
const [upload] = useState(() => blobUploader((file, url) => urls.current.set(file, url)));
const form = useForm<Values>({ defaultValues: { title: "", files: [] } });
// files has no input of its own, so register it by hand with its rule
useEffect(() => {
form.register("files", { validate: (v) => v.length > 0 || "Add at least one file" });
}, [form]);
// keep the field in sync with what finished uploading (removed rows drop out too)
const sync = (items: UploadItem[]) => {
setBusy(items.some((i) => i.status === "uploading"));
const done = items.flatMap((i) => (i.status === "done" && i.file && urls.current.has(i.file) ? [urls.current.get(i.file)!] : []));
form.setValue("files", done, { shouldValidate: form.formState.isSubmitted });
};
return (
<form onSubmit={form.handleSubmit(onSave)} className="grid gap-4">
<Input {...form.register("title", { required: true })} placeholder="Title" />
<UploadDropzone upload={upload} onChange={sync} />
{form.formState.errors.files && <p className="text-sm text-destructive">{form.formState.errors.files.message}</p>}
<Button type="submit" disabled={busy || form.formState.isSubmitting}>
{busy ? "Waiting for uploads" : "Save"}
</Button>
</form>
);
}import {
Attachment,
AttachmentAction,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentGroup,
AttachmentMedia,
AttachmentTitle,
} from "@/components/ui/attachment";
export type SavedFile = { key: string; name: string; size: number; url: string; isImage: boolean };
const size = (b: number) => (b >= 1048576 ? `${(b / 1048576).toFixed(1)} MB` : `${Math.max(1, Math.round(b / 1024))} KB`);
// Files that are already stored, shown with shadcn's Attachment. New files go through the dropzone above it.
export function SavedFiles({ files, onRemove }: { files: SavedFile[]; onRemove: (key: string) => void }) {
if (!files.length) return null;
return (
<AttachmentGroup>
{files.map((f) => (
<Attachment key={f.key} state="done">
<AttachmentMedia variant={f.isImage ? "image" : "icon"}>
{f.isImage ? <img src={f.url} alt="" /> : <span className="text-xs font-medium">{f.name.split(".").pop()?.toUpperCase()}</span>}
</AttachmentMedia>
<AttachmentContent>
<AttachmentTitle>{f.name}</AttachmentTitle>
<AttachmentDescription>{size(f.size)}</AttachmentDescription>
</AttachmentContent>
<AttachmentActions>
<AttachmentAction aria-label={`Remove ${f.name}`} onClick={() => onRemove(f.key)}>
<span aria-hidden="true">×</span>
</AttachmentAction>
</AttachmentActions>
</Attachment>
))}
</AttachmentGroup>
);
}npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.jsonAll comparisons, with prices read on each library's own site.
Not a dropzone. It has Input with type="file" and Attachment, which lists files with their upload state. Upload Dropzone is a free drop area you add with one shadcn command.
Give the dropzone an upload function and call onProgress as bytes go out. With fetch you can't see upload progress, so use XMLHttpRequest for the PUT, or a client like Vercel Blob's upload() that reports it.
Yes. Each file gets its own row, progress ring, retry and remove, and a total bar sums them by size.
maxSize is enforced for every file. accept only filters the picker, so check the type in your uploader and again on the server.
Its peer range stops at React 18, so npm won't install it next to React 19 without --legacy-peer-deps. We didn't test it further than that.
Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.
Yes. MIT licence, no email needed for the registry install.
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.