Dropzone

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { AlertCircleIcon, UploadCloudIcon } from 'lucide-react';
5import * as React from 'react';
6import { useDropzone, type DropzoneOptions } from 'react-dropzone';
7import { formatFileSize, useUploader } from './uploader-provider';
8 
9const DROPZONE_VARIANTS = {
10  base: 'relative rounded-md p-4 w-full flex justify-center items-center flex-col cursor-pointer border-2 border-dashed border-muted-foreground transition-colors duration-200 ease-in-out',
11  active: 'border-primary',
12  disabled:
13    'bg-muted border-muted-foreground cursor-default pointer-events-none opacity-50',
14  accept: 'border-primary bg-primary/10',
15  reject: 'border-destructive bg-destructive/10',
16};
17 
18/**
19 * Props for the Dropzone component.
20 *
21 * @interface DropzoneProps
22 * @extends {React.HTMLAttributes<HTMLInputElement>}
23 */
24export interface DropzoneProps extends React.HTMLAttributes<HTMLInputElement> {
25  /**
26   * Options passed to the underlying react-dropzone component.
27   * Cannot include 'disabled' or 'onDrop' as they are handled internally.
28   */
29  dropzoneOptions?: Omit<DropzoneOptions, 'disabled' | 'onDrop'>;
30 
31  /**
32   * Whether the dropzone is disabled.
33   */
34  disabled?: boolean;
35 
36  /**
37   * Message shown when files are being dragged over the dropzone.
38   */
39  dropMessageActive?: string;
40 
41  /**
42   * Default message shown when the dropzone is idle.
43   */
44  dropMessageDefault?: string;
45}
46 
47/**
48 * A dropzone component for file uploads that integrates with the UploaderProvider.
49 *
50 * @component
51 * @example
52 * ```tsx
53 * <Dropzone
54 *   dropzoneOptions={{
55 *     maxFiles: 5,
56 *     maxSize: 1024 * 1024 * 10, // 10MB
57 *   }}
58 * />
59 * ```
60 */
61const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
62  (
63    {
64      dropzoneOptions,
65      className,
66      disabled,
67      dropMessageActive = 'Drop files here...',
68      dropMessageDefault = 'drag & drop files here, or click to select',
69      ...props
70    },
71    ref,
72  ) => {
73    const { fileStates, addFiles } = useUploader();
74    const [error, setError] = React.useState<string>();
75 
76    const maxFiles = dropzoneOptions?.maxFiles;
77    const maxSize = dropzoneOptions?.maxSize;
78    const isMaxFilesReached = !!maxFiles && fileStates.length >= maxFiles;
79    const isDisabled = disabled ?? isMaxFilesReached;
80 
81    const {
82      getRootProps,
83      getInputProps,
84      isDragActive,
85      isFocused,
86      isDragAccept,
87      isDragReject,
88    } = useDropzone({
89      disabled: isDisabled,
90// … truncated