Single Image Dropzone

1'use client';
2 
3import { cn } from '@/lib/utils';
4import {
5  AlertCircleIcon,
6  Trash2Icon,
7  UploadCloudIcon,
8  XIcon,
9} from 'lucide-react';
10import * as React from 'react';
11import { useDropzone, type DropzoneOptions } from 'react-dropzone';
12import { ProgressCircle } from './progress-circle';
13import { formatFileSize, useUploader } from './uploader-provider';
14 
15const DROPZONE_VARIANTS = {
16  base: 'relative rounded-md p-4 flex justify-center items-center flex-col cursor-pointer min-h-[150px] min-w-[200px] border-2 border-dashed border-muted-foreground transition-colors duration-200 ease-in-out',
17  image: 'border-0 p-0 min-h-0 min-w-0 relative bg-muted shadow-md',
18  active: 'border-primary',
19  disabled:
20    'bg-muted/50 border-muted-foreground/50 cursor-default pointer-events-none',
21  accept: 'border-primary bg-primary/10',
22  reject: 'border-destructive bg-destructive/10',
23};
24 
25/**
26 * Props for the SingleImageDropzone component.
27 *
28 * @interface SingleImageDropzoneProps
29 * @extends {React.HTMLAttributes<HTMLInputElement>}
30 */
31export interface SingleImageDropzoneProps
32  extends React.HTMLAttributes<HTMLInputElement> {
33  /**
34   * The width of the dropzone area in pixels.
35   */
36  width: number;
37 
38  /**
39   * The height of the dropzone area in pixels.
40   */
41  height: number;
42 
43  /**
44   * Whether the dropzone is disabled.
45   */
46  disabled?: boolean;
47 
48  /**
49   * Options passed to the underlying react-dropzone component.
50   * Cannot include 'disabled', 'onDrop', 'maxFiles', or 'multiple' as they are handled internally.
51   */
52  dropzoneOptions?: Omit<
53    DropzoneOptions,
54    'disabled' | 'onDrop' | 'maxFiles' | 'multiple'
55  >;
56}
57 
58/**
59 * A single image upload component with preview and upload status.
60 *
61 * This component allows users to upload a single image, shows a preview,
62 * displays upload progress, and provides controls to remove or cancel the upload.
63 *
64 * @component
65 * @example
66 * ```tsx
67 * <SingleImageDropzone
68 *   width={320}
69 *   height={320}
70 *   dropzoneOptions={{ maxSize: 1024 * 1024 * 2 }} // 2MB
71 * />
72 * ```
73 */
74const SingleImageDropzone = React.forwardRef<
75  HTMLInputElement,
76  SingleImageDropzoneProps
77>(({ dropzoneOptions, width, height, className, disabled, ...props }, ref) => {
78  const { fileStates, addFiles, removeFile, cancelUpload } = useUploader();
79  const [error, setError] = React.useState<string>();
80 
81  const fileState = React.useMemo(() => fileStates[0], [fileStates]);
82  const maxSize = dropzoneOptions?.maxSize;
83 
84// … truncated