Toast Button

1"use client";
2
3import { Button } from "@/components/ui/button";
4import { UploadButton, useUploadThing } from "@/lib/uploadthing";
5import {
6  checkFileObjectKey,
7  getFileSizeFormatted,
8  truncateFileName,
9} from "@/lib/uploadthingui-utils";
10import { useFileStorageStore, type UTUIFile } from "@/stores/main";
11import { createId } from "@paralleldrive/cuid2";
12import { Upload } from "lucide-react";
13import { useEffect, useRef, type ComponentProps } from "react";
14import { toast } from "sonner";
15import { generatePermittedFileTypes } from "uploadthing/client";
16
17// Get the props type directly from UploadButton
18type UploadButtonProps = ComponentProps<typeof UploadButton>;
19
20/**
21 * @description An upload button component which uses toasts as its response method.
22 * @param {UploadButtonProps} props - The props for the UploadButton component.
23 * @param {boolean} showDetails - Whether to show the details of the upload.
24 * @param {string} instanceId - The instance ID for the upload. Required to avoid multiple instances of the same component if multiple upload buttons are used.
25 * @param {boolean} allowInBetweenUploads - Whether to allow in between uploads.
26 * @param {routeDetails} routeDetails - Additional details for the upload; Example: maxFileCount, minFileCount, etc.
27 * @param {React.ReactNode} children - React node to render a custom button component.
28 */
29export default function ToastButton({
30  props,
31  showDetails = false,
32  instanceId,
33  allowInBetweenUploads = true,
34  routeDetails,
35  children,
36}: {
37  props: UploadButtonProps;
38  showDetails?: boolean;
39  instanceId: string;
40  routeDetails?: {
41    maxFileCount?: number;
42    minFileCount?: number;
43  };
44  allowInBetweenUploads?: boolean;
45  children?: React.ReactNode;
46}) {
47  // [1]. States, Refs, Hooks, etc.
48  const { endpoint, ...restProps } = props;
49
50  // Used to reference the file input element
51  const fileInputRef = useRef<HTMLInputElement>(null);
52
53  const { getFiles, addFiles } = useFileStorageStore();
54
55  // Used to get the route config from uploadthing
56  const { routeConfig } = useUploadThing(endpoint, {
57    ...restProps,
58  });
59
60  const files = getFiles(instanceId);
61
62  const canUpload =
63    allowInBetweenUploads ||
64    files.filter((file) => file.status === "uploading").length === 0;
65
66  // Used to generate the accepted file types
67  const acceptedFileTypes = generatePermittedFileTypes(routeConfig)
68    .fileTypes.map((fileType) => {
69// … truncated