Toast Button

An upload button component which uses toasts as its response method.

Note:

All uploadthing functions like .onUploadComplete will run on each file as each file upload runs its own startUpload.


Allowed type: image/*Atleast 1 file(s)Up to 8MB each

About

The <ToastButton/> component uses the Button and Sonner.


Installation

pnpm dlx shadcn@latest add https://uploadthingui.vercel.app/r/toast-button.json

Usage

import ToastButton from "@/components/uploadthingui/toast-button";

<ToastButton
  props={{ endpoint: "imageUploader" }}
  instanceId="toast-button-general"
  showDetails
/>

Make sure to add the sonner component inside your layout.tsx.

app/layout.tsx
import { Toaster } from 'sonner';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Props

NameTypeRequiredDefaultDescription
propsuploadthingyes-Accepts all the props that are available with uploadthing

Only the endpoint is required.

Note that the endpoint isn't type-safe.
showDetailsbooleannofalseShow the details/metadata for the upload route endpoint
instanceIdstringyes-This will be used as an identifier if multiple file upload buttons are used at the same time

It's recommended to add this to avoid duplication of file uploads
allowInBetweenUploadsbooleannotrueWhether to allow in-between uploads

If false, then when files are being uploaded, no new files can be uploaded.
routeDetailsrouteDetailsno-Additional details for the upload; Example: maxFileCount, minFileCount, etc.

It's recommended to add these details here instead of in your route.
childrenReactNodeno-Any node written will take the place of the action button

Examples

Custom Action Button



Route Details

Note:

Add route details (minFileCount & maxFileCount) here and not inside your core.ts. This is because each file upload runs its own startUpload.

If a route has a minFileCount set to 2, then that condition will never be met at the route level. Therefore, you shouldn't add these properties inside your core.ts; instead, add them at the component level.


Allowed type: image/*Atleast 2 file(s)Atmost 5 file(s)Up to 8MB each

Allow In Between Uploads

Note:

Set to true by default. When set to false, you won't be able to upload any files when a file is being uploaded.



Without metadata

Note:

Set to false by default. When set to true, you'll see additional details about the route.



Change Log

No changes made until today :)