Dropzone

1"use client";
2 
3import { useCallback, useRef, useState } from "react";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6import { coarseTarget, focusRing } from "@/lib/recipes";
7import { Progress } from "@/components/ui/progress";
8import { Card } from "@/components/ui/card";
9import { File, Upload, X } from "@phosphor-icons/react/dist/ssr";
10 
11export type DropzoneRejectionCode =
12  | "file-invalid-type"
13  | "file-too-large"
14  | "too-many-files"
15  | "custom";
16 
17export interface DropzoneFileRejection {
18  file: File;
19  code: DropzoneRejectionCode;
20  message: string;
21}
22 
23export interface DropzoneProps
24  extends Omit<
25    React.HTMLAttributes<HTMLDivElement>,
26    "onDrop" | "onChange" | "title" | "defaultValue"
27  > {
28  /** Controlled file list. */
29  value?: File[];
30  /** Initial files when uncontrolled. */
31  defaultValue?: File[];
32  /** Called when the file list changes (add or remove). */
33  onValueChange?: (files: File[]) => void;
34  /** Accepted MIME types, wildcards, or file extensions. */
35  accept?: string;
36  /** Allow multiple files. Default true. */
37  multiple?: boolean;
38  /** Max number of files. */
39  maxFiles?: number;
40  /** Max size per file in bytes. */
41  maxSize?: number;
42  /** Disable interaction. */
43  disabled?: boolean;
44  /** Render the file list below the drop area. Default true. */
45  showFileList?: boolean;
46  /**
47   * Apply additional validation alongside built-in type, size, and count
48   * checks. Return false or a rejection reason to refuse the file.
49   */
50  validate?: (file: File, currentFiles: File[]) => boolean | string;
51  /** Called after a selection attempt when files are rejected. */
52  onFilesRejected?: (rejections: DropzoneFileRejection[]) => void;
53  /** Custom render function for each file row. */
54  renderFile?: (
55    file: File,
56    index: number,
57    onRemove: () => void,
58  ) => React.ReactNode;
59  /** Visual title rendered inside the drop area. */
60  title?: React.ReactNode;
61  /** Helper text rendered below the title. */
62  description?: React.ReactNode;
63  /** Uploading state: number 0-100 for determinate, `null` for indeterminate. */
64  progress?: number | null;
65  /** Visual size. `md` (default) — spacious drop area for standalone
66   *  upload surfaces. `sm` — tighter padding and icon for inline use
67   *  inside forms/sheets alongside other fields. */
68  size?: "sm" | "md";
69}
70 
71const DROP_AREA_SIZE: Record<"sm" | "md", string> = {
72  sm: "px-4 py-5 gap-2",
73  md: "px-6 py-10 gap-3",
74};
75// … truncated