A drag-and-drop file upload zone with progress tracking, validation, and uploaded-file management that works with any upload backend.
"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> ); }