Components
A drag-and-drop file upload zone with progress tracking, validation, and uploaded-file management that works with any upload backend.
Loading preview...
"use client";
import { UploadThingDropzone } from "@/components/ui/uploadthing-dropzone";
export default function UploadThingDropzoneDemo() {
const handleUpload = async (files: File[]) => {
await new Promise((resolve) => setTimeout(resolve, 1500));
return files.map((file) => ({
name: file.name,
size: file.size,
type: file.type,
url: URL.createObjectURL(file),
}));
};
return (
<div className="flex min-h-[420px] w-full items-center justify-center bg-background p-6 text-foreground">
<div className="w-full max-w-md">
<UploadThingDropzone
onUpload={handleUpload}
maxFiles={4}
maxSize={4 * 1024 * 1024}
/>
</div>
</div>
);
}