Checking what you can upload
Overview
Drag-and-drop upload zone component with UploadThing. Supports both drag-and-drop and click-to-upload interactions.
Installation
npm install uploadthing @uploadthing/react
npx shadcn@latest add @elements/uploadthing-dropzoneSetup
Configure your upload endpoint (see UploadThing Button setup for core configuration).
Usage
import { UploadThingDropzone } from "@/components/uploadthing-dropzone";
export function DocumentUpload() {
return (
<UploadThingDropzone
endpoint="documentUploader"
onClientUploadComplete={(res) => {
console.log("Uploaded:", res);
}}
onUploadError={(error) => {
console.error("Error:", error);
}}
/>
);
}Features
- Drag-and-drop interface
- Click-to-browse fallback
- Upload progress indicator
- File type validation
- Multiple file support
- Visual feedback states