File Uploader

1"use client";
2 
3import * as React from "react";
4import {
5  FileImage,
6  FileSpreadsheet,
7  FileText,
8  Upload,
9  X,
10  type LucideIcon,
11} from "lucide-react";
12 
13import { cn } from "@/lib/utils";
14import {
15  useDropzone,
16  type DropzoneFileItem,
17  type DropzoneFileRejection,
18  type UseDropzoneProps,
19} from "@/components/ui/dropzone";
20import { formatFileSize } from "@/components/ui/file-size-format";
21import { FileThumbnail } from "@/components/ui/file-thumbnail";
22 
23export type FileUploaderAcceptedFileType = {
24  label: string;
25  icon: LucideIcon;
26};
27 
28export type FileUploaderProps = UseDropzoneProps &
29  Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onDrop"> & {
30    acceptedFileTypes?: FileUploaderAcceptedFileType[];
31    browseLabel?: React.ReactNode;
32    description?: React.ReactNode;
33    draggingLabel?: React.ReactNode;
34    showFileList?: boolean;
35    title?: React.ReactNode;
36  };
37 
38const ACCEPTED_FILE_TYPES: FileUploaderAcceptedFileType[] = [
39  { label: "Image", icon: FileImage },
40  { label: "PDF", icon: FileText },
41  { label: "Sheet", icon: FileSpreadsheet },
42];
43 
44const STATIC_ICON_OFFSETS = [
45  "translate(-78%, -50%) rotate(-8deg)",
46  "translate(-50%, -50%)",
47  "translate(-22%, -50%) rotate(8deg)",
48];
49 
50export function FileUploader({
51  accept,
52  acceptedFileTypes = ACCEPTED_FILE_TYPES,
53  browseLabel = "Browse files",
54  className,
55  defaultFiles,
56  description = "PDF, DOCX, XLSX, CSV, PNG, or JPG",
57  disabled = false,
58  draggingLabel = "Drop to add",
59  files,
60  maxFiles,
61  maxSize,
62  multiple = true,
63  showFileList = true,
64  title = "Click to upload or drop files",
65  onFilesChange,
66  onIntake,
67  ...props
68}: FileUploaderProps) {
69  const dropzone = useDropzone({
70    accept,
71    defaultFiles,
72    disabled,
73    files,
74    maxFiles,
75    maxSize,
76    multiple,
77    onFilesChange,
78    onIntake,
79  });
80  const rejectionMessage = dropzone.lastIntake.fileRejections[0]
81    ? getDropzoneRejectionMessage(dropzone.lastIntake.fileRejections[0])
82    : null;
83  const titleText = typeof title === "string" ? title : "Upload files";
84  const triggerProps = dropzone.getTriggerProps<HTMLDivElement>({
85    ...props,
86    className: cn(
87      "relative flex min-h-64 cursor-pointer flex-col items-center justify-center gap-5 overflow-hidden rounded-lg border border-dashed bg-background px-6 py-10 text-center outline-none",
88      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24",
89      dropzone.isDragging
90        ? "border-foreground/40 bg-accent/35"
91// … truncated