Image Uploader

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { Trash2Icon, XIcon } from 'lucide-react';
5import * as React from 'react';
6import { type DropzoneOptions } from 'react-dropzone';
7import { Dropzone } from './dropzone';
8import { ProgressCircle } from './progress-circle';
9import { useUploader } from './uploader-provider';
10 
11/**
12 * Props for the ImageList component.
13 *
14 * @interface ImageListProps
15 * @extends {React.HTMLAttributes<HTMLDivElement>}
16 */
17export interface ImageListProps extends React.HTMLAttributes<HTMLDivElement> {
18  /**
19   * Whether the image deletion controls should be disabled.
20   */
21  disabled?: boolean;
22}
23 
24/**
25 * Displays a grid of image previews with upload status and controls.
26 *
27 * @component
28 * @example
29 * ```tsx
30 * <ImageList className="my-4" />
31 * ```
32 */
33const ImageList = React.forwardRef<HTMLDivElement, ImageListProps>(
34  ({ className, disabled: initialDisabled, ...props }, ref) => {
35    const { fileStates, removeFile, cancelUpload } = useUploader();
36 
37    // Create temporary URLs for image previews
38    const tempUrls = React.useMemo(() => {
39      const urls: Record<string, string> = {};
40      fileStates.forEach((fileState) => {
41        if (fileState.file) {
42          urls[fileState.key] = URL.createObjectURL(fileState.file);
43        }
44      });
45      return urls;
46    }, [fileStates]);
47 
48    // Clean up temporary URLs on unmount
49    React.useEffect(() => {
50      return () => {
51        Object.values(tempUrls).forEach((url) => {
52          URL.revokeObjectURL(url);
53        });
54      };
55    }, [tempUrls]);
56 
57    if (!fileStates.length) return null;
58 
59    return (
60      <div
61        ref={ref}
62        className={cn('mt-4 grid grid-cols-3 gap-2', className)}
63        {...props}
64      >
65        {fileStates.map((fileState) => {
66          const displayUrl = tempUrls[fileState.key] ?? fileState.url;
67          return (
68            <div
69              key={fileState.key}
70              className={
71                'relative aspect-square h-full w-full rounded-md border-0 bg-muted p-0 shadow-md'
72              }
73            >
74              {displayUrl ? (
75                <img
76                  className="h-full w-full rounded-md object-cover"
77                  src={displayUrl}
78                  alt={fileState.file.name}
79                />
80              ) : (
81                <div className="flex h-full w-full items-center justify-center bg-secondary">
82                  <span className="text-xs text-muted-foreground">
83                    No Preview
84// … truncated