"use client" import * as React from "react" import { cva } from "class-variance-authority" import { CheckCircle, File, UploadCloudIcon, X } from "lucide-react" import { useDropzone, type DropzoneOptions } from "react-dropzone" import { cn } from "@/lib/utils" export const formatFileSize = (bytes: number) => { if (typeof bytes !== "number") return "0 B" if (bytes === 0) return "0 B" const units = ["B", "KB", "MB", "GB"] as const const exponent = Math.min( Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1 ) const size = Number((bytes / Math.pow(1024, exponent)).toFixed(2)) return `${size} ${units[exponent]}` } const dropzoneVariants = cva( "relative mx-auto flex max-w-3xl cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed transition-all duration-300 ease-in-out", { variants: { variant: { base: "border-gray-300 bg-white hover:border-gray-400 dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-500 dark:hover:bg-gray-800", active: "border-gray-400 dark:border-gray-500", disabled: "cursor-not-allowed border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-700", accept: "border-green-500 bg-green-50 dark:border-green-400 dark:bg-green-900/20", reject: "border-red-500 bg-red-50 dark:border-red-400 dark:bg-red-900/20", image: "relative aspect-square h-full w-full rounded-md border-0 bg-slate-200 p-0 shadow-md dark:bg-slate-900", }, }, defaultVariants: { variant: "base", }, } ) export type FileState = { file: File | string key: string progress: "PENDING" | "COMPLETE" | "ERROR" | number } type InputProps = { className?: string value?: FileState[] onChange?: (files: FileState[]) => void | Promise onFilesAdded?: (addedFiles: FileState[]) => void | Promise disabled?: boolean dropzoneOptions?: Omit isDirectUpload?: boolean onUpload?: (files: File[]) => void | Promise width?: string height?: string displayMode?: "grid" | "list" } const ERROR_MESSAGES = { fileTooLarge(maxSize: number) { return `The file is too large. Max size is ${formatFileSize(maxSize)}.` }, fileInvalidType() { return "Invalid file type." }, tooManyFiles(maxFiles: number) { return `You can only add ${maxFiles} file(s).` }, fileNotSupported() { return "The file is not supported." }, } const MultiImageDropzone = React.forwardRef( (props, ref) => { const { dropzoneOptions, value, className, disabled, onChange, onFilesAdded, isDirectUpload, onUpload, width = "100%", height = "300px", displayMode = "grid", } = props const [customError, setCustomError] = React.useState() const imageUrls = React.useMemo(() => { if (value) { return value.map((fileState) => { if (typeof fileState.file === "string") { // in case an url is passed in, use it to display the image return fileState.file } else { // in case a file is passed in, create a base64 url to display the image return URL.createObjectURL(fileState.file) } }) } return [] }, [value]) const handleDrop = async (acceptedFiles: File[]) => { const files = acceptedFiles setCustomError(undefined) if ( dropzoneOptions?.maxFiles && (value?.length ?? 0) + files.length > dropzoneOptions.maxFiles ) { setCustomError(ERROR_MESSAGES.tooManyFiles(dropzoneOptions.maxFiles)) return } if (files) { const addedFiles = files.map((file) => ({ file, key: Math.random().toString(36).slice(2), progress: "PENDING", })) if (isDirectUpload && onUpload) { await onUpload(files) } void onFilesAdded?.(addedFiles) void onChange?.([...(value ?? []), ...addedFiles]) } } // dropzone configuration const { getRootProps, getInputProps, fileRejections, isFocused, isDragAccept, isDragReject, } = useDropzone({ accept: { "image/*": [] }, disabled, onDrop: handleDrop, ...dropzoneOptions, }) // Update the variant logic const variant = React.useMemo(() => { if (disabled) return "disabled" if (isDragReject) return "reject" if (isDragAccept) return "accept" if (isFocused) return "active" return "base" }, [isFocused, isDragAccept, isDragReject, disabled]) // error validation messages const errorMessage = React.useMemo(() => { if (fileRejections[0]) { const { errors } = fileRejections[0] if (errors[0]?.code === "file-too-large") { return ERROR_MESSAGES.fileTooLarge(dropzoneOptions?.maxSize ?? 0) } else if (errors[0]?.code === "file-invalid-type") { return ERROR_MESSAGES.fileInvalidType() } else if (errors[0]?.code === "too-many-files") { return ERROR_MESSAGES.tooManyFiles(dropzoneOptions?.maxFiles ?? 0) } else { return ERROR_MESSAGES.fileNotSupported() } } return undefined }, [fileRejections, dropzoneOptions]) return (

Drop your images here

{dropzoneOptions?.maxFiles && `Max ${dropzoneOptions.maxFiles} files, `} {dropzoneOptions?.maxSize && `up to ${formatFileSize(dropzoneOptions.maxSize)}`}

{displayMode === "grid" ?

{/* Images */} {value?.map(({ file, progress }, index) => (

{typeof file !== "string" ? {file.name}

: }

{/* Progress Bar */} {typeof progress === "number" && (

)} {/* Remove Image Icon */} {imageUrls[index] && !disabled && progress === "PENDING" && (

{ e.stopPropagation() void onChange?.(value.filter((_, i) => i !== index) ?? []) }} >

)}

))}

{value?.map(({ file, progress, key }, index) => (

{/* Success Check Icon */} {progress === "COMPLETE" && ( )}

{typeof file === "string" ? file : file.name} {typeof file !== "string" && formatFileSize(file.size)}

{typeof file !== "string" ? `image/${ file.name.split(".").pop()?.toLowerCase() || "unknown" }` : "image/unknown"} • modified {new Date().toLocaleDateString()}

{typeof progress === "number" && (

)}

{!disabled && ( )}

))}

}

{customError ?? errorMessage}

) } ) MultiImageDropzone.displayName = "MultiImageDropzone" export { MultiImageDropzone } function CircleProgress({ progress }: { progress: number }) { const strokeWidth = 10 const radius = 50 const circumference = 2 * Math.PI * radius return (

{Math.round(progress)}%

) } function LinearProgress({ progress }: { progress: number }) { return (

) }