import { UploadThingButton } from "@/components/elements/uploadthing/upload-button";

export function MyUploader() {
  return (
    <UploadThingButton
      endpoint="imageUploader"
      onUploadComplete={(files) => console.log(files)}
      onUploadError={(error) => console.error(error)}
    />
  );
}

import { UploadThingDropzone } from "@/components/elements/uploadthing/upload-dropzone";

export function FileUploader() {
  return (
    <UploadThingDropzone
      endpoint="imageUploader"
      maxFiles={4}
      onUploadComplete={(files) => console.log(files)}
    />
  );
}

npm install uploadthing @uploadthing/react

UPLOADTHING_SECRET=sk_live_...
UPLOADTHING_APP_ID=your-app-id

// app/elements/uploadthing/core.ts
import { createUploadthing, type FileRouter } from "uploadthing/next";

const f = createUploadthing();

export const ourFileRouter = {
  imageUploader: f({ image: { maxFileSize: "4MB" } }) 
    .onUploadComplete(({ file }) => {
      console.log(file.url);
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

// app/api/uploadthing/route.ts
import { createRouteHandler } from "uploadthing/next";
import { ourFileRouter } from "@/app/elements/uploadthing/core";

export const { GET, POST } = createRouteHandler({ 
  router: ourFileRouter,
});

f({ image: { maxFileSize: "4MB" } })
f({ pdf: { maxFileSize: "8MB" } })
f({ video: { maxFileSize: "16MB" } })
f({ blob: { maxFileSize: "32MB" } })

onUploadComplete={(files) => {
  files.forEach(f => console.log(f.ufsUrl));
}}

onUploadError={(error) => {
  console.error(error.message);
}}