Overview
Clean button upload component powered by UploadThing. Triggers file picker on click and handles upload automatically.
Installation
npx shadcn@latest add @elements/uploadthing-buttonSetup
Create your UploadThing configuration:
// app/api/uploadthing/core.ts
import { createUploadthing } from "uploadthing/next";
const f = createUploadthing();
export const ourFileRouter = {
imageUploader: f({ image: { maxFileSize: "4MB" } }).onUploadComplete(
({ file }) => {
console.log("Upload complete:", file.url);
},
),
};Add environment variable:
UPLOADTHING_SECRET=sk_live_...
UPLOADTHING_APP_ID=app_...Usage
import { UploadThingButton } from "@/components/uploadthing-button";
export function ProfileUpload() {
return (
<UploadThingButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
console.log("Files:", res);
}}
/>
);
}Features
- One-click file upload
- Progress tracking
- Error handling
- Customizable styling