Dropzone Dialog

1"use client";
2
3import { Button } from "@/components/ui/button";
4import {
5  Dialog,
6  DialogContent,
7  DialogDescription,
8  DialogFooter,
9  DialogHeader,
10  DialogTitle,
11  DialogTrigger,
12} from "@/components/ui/dialog";
13import {
14  Drawer,
15  DrawerContent,
16  DrawerDescription,
17  DrawerFooter,
18  DrawerHeader,
19  DrawerTitle,
20  DrawerTrigger,
21} from "@/components/ui/drawer";
22import {
23  Tooltip,
24  TooltipContent,
25  TooltipTrigger,
26} from "@/components/ui/tooltip";
27import { useMediaQuery } from "@/hooks/use-media-query";
28import { UploadButton, useUploadThing } from "@/lib/uploadthing";
29import {
30  checkFileObjectKey,
31  getFileSizeFormatted,
32  truncateFileName,
33} from "@/lib/uploadthingui-utils";
34import { cn } from "@/lib/utils";
35import { useFileStorageStore, type UTUIFile } from "@/stores/main";
36import { createId } from "@paralleldrive/cuid2";
37import { useDropzone } from "@uploadthing/react";
38import {
39  generateClientDropzoneAccept,
40  generatePermittedFileTypes,
41} from "@uploadthing/shared";
42import { File, Upload, UploadCloud, X } from "lucide-react";
43import {
44  cloneElement,
45  isValidElement,
46  useCallback,
47  useEffect,
48  useRef,
49  useState,
50  type ComponentProps,
51} from "react";
52import { toast } from "sonner";
53
54// Get the props type directly from UploadButton
55type UploadButtonProps = ComponentProps<typeof UploadButton>;
56
57/**
58 * @description An upload button component which opens up a dialog with a dropzone and uses toasts as its response method.
59 * @param {UploadButtonProps} props - The props for the UploadButton component.
60 * @param {boolean} showDetails - Whether to show the details of the upload.
61 * @param {string} instanceId - The instance ID for the upload. Required to avoid multiple instances of the same component if multiple upload buttons are used.
62 * @param {boolean} allowInBetweenUploads - Whether to allow in between uploads.
63 * @param {routeDetails} routeDetails - Additional details for the upload; Example: maxFileCount, minFileCount, etc.
64 * @param {React.ReactNode} children - React node to render a custom button component.
65 */
66export default function DropzoneDialog({
67  props,
68  showDetails = true,
69  instanceId,
70  allowInBetweenUploads = true,
71  routeDetails,
72  children,
73}: {
74  props: UploadButtonProps;
75  showDetails?: boolean;
76  instanceId: string;
77  allowInBetweenUploads?: boolean;
78  routeDetails?: {
79    maxFileCount?: number;
80    minFileCount?: number;
81  };
82// … truncated