Dropzone Dialog
An upload button component which opens up a dialog with a dropzone and 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.
About
The <DropzoneDialog/> component uses the Button, Sonner, Dialog, Tooltip and Drawer.
Installation
pnpm dlx shadcn@latest add https://uploadthingui.vercel.app/r/dropzone-dialog.json
Usage
import DropzoneDialog from "@/components/uploadthingui/dropzone-dialog";
<DropzoneDialog
props={{ endpoint: "imageUploader" }}
instanceId="dropzone-dialog-general"
/>
Make sure to add the sonner component inside your layout.tsx.
import { Toaster } from 'sonner';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Toaster />
</body>
</html>
)
}
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| props | uploadthing | yes | - | Accepts all the props that are available with uploadthing Only the endpoint is required. Note that the endpoint isn't type-safe. |
| showDetails | boolean | no | true | Show the details/metadata for the upload route endpoint |
| instanceId | string | yes | - | 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 |
| allowInBetweenUploads | boolean | no | true | Whether to allow in-between uploads If false, then when files are being uploaded, no new files can be uploaded. |
| routeDetails | routeDetails | no | - | Additional details for the upload; Example: maxFileCount, minFileCount, etc. It's recommended to add these details here instead of in your route. |
| children | ReactNode | no | - | 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.
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 true by default. When set to false, you won't see the additional
details about the route.
Change Log
No changes made until today :)