Uploadthing

This section previews the button uploadthing component.

A custom Uploadthing button, which is the file upload workflow copied from the uploadthing's admin dashboard.

Preview

0

About

UTUIButtonUploadthing is build on top of Button and Sonner

Installation - CLI

npx shadcn@latest add https://uploadthing-ui.vercel.app/r/button-uploadthing.json

Usage

Update inside of your components/ui/sonner.tsx

components/ui/sonner.tsx
<Sonner
  theme={theme as ToasterProps["theme"]}
  className="toaster group"
  toastOptions={{
    classNames: {
      toast:
        "rounded-md group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
      description: "group-[.toast]:text-muted-foreground",
      actionButton:
        "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
      cancelButton:
        "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
    },
  }}
  {...props}
/>

Update inside of your tailwind.config.ts

Note about Tailwind Config:

The sm breakpoint is used to determine the breakpoint for the sonner to avoid layout shifts. It MUST be set to 600px for now. The sonner breaks otherwise.

tailwind.config.ts
export default {
  theme: {
    extend: {
      screens: {
        sm: "600px",
      },
    },
  },
} satisfies Config;

Add inside of your layout.tsx

import { Toaster } from "@/components/ui/sonner";

<Toaster expand theme="system" gap={8} />

Add inside of your client component

import UTUIButtonUploadthing from "@/components/uploadthing-ui/button-uploadthing";

Note:

Replace the fileRoute with which api route you want to use. fileRoute isn't typesafe,

<UTUIButtonUploadthing
  UTUIFunctionsProps={{
    fileRoute: "imageUploader",
    onBeforeUploadBegin: (files) => {
      // Your additional code here
      console.log(files);

      return files;
    },
    onUploadBegin: (fileName) => {
      // Your additional code here
      console.log(fileName);
    },
    onUploadProgress: (progress) => {
      // Your additional code here
      console.log(progress);
    },
    onClientUploadComplete: (res) => {
      // Your additional code here
      console.log(res);
    },
    onUploadError: (error) => {
      // Your additional code here
      console.log(error);
    },
    onUploadAborted: (file) => {
      // Your additional code here
      console.log(file);
    },
  }}
/>