"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

type DropzoneFile = {
  id: string;
  file: File;
  previewUrl?: string;
  progress: number;
};

export interface FileDropzoneProps
  extends React.HTMLAttributes<HTMLDivElement> {
  accept?: string;
  multiple?: boolean;
  maxFiles?: number;
  onFilesChange?: (files: File[]) => void;
}

const UploadIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M12 16V4m0 0l-4 4m4-4l4 4"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const CloseIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M6 6l12 12M18 6l-12 12"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const FileIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M14 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-5-6z"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M14 2v6h6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const ImageIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <rect
      x="3"
      y="4"
      width="18"
      height="16"
      rx="2"
      strokeWidth="1.5"
    />
    <circle cx="9" cy="10" r="2" strokeWidth="1.5" />
    <path
      d="M21 16l-5.5-5.5L7 19"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const PdfIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M14 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-5-6z"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M14 2v6h6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M8 14h3a2 2 0 010 4H8v-4zm6 0h2"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M14 18h2"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const AudioIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M9 18a3 3 0 110-6h3V6l6-2v12"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <circle cx="9" cy="15" r="3" strokeWidth="1.5" />
    <circle cx="18" cy="14" r="2" strokeWidth="1.5" />
  </svg>
);

const VideoIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <rect
      x="3"
      y="6"
      width="14"
      height="12"
      rx="2"
      strokeWidth="1.5"
    />
    <path
      d="M17 10l4-2v8l-4-2"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const createFileEntry = (file: File): DropzoneFile => ({
  id: `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`,
  file,
  previewUrl: file.type.startsWith("image/")
    ? URL.createObjectURL(file)
    : undefined,
  progress: 0,
});

const parseAcceptList = (accept?: string) => {
  if (!accept) return [];
  return accept
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);
};

const matchesAccept = (file: File, acceptList: string[]) => {
  if (acceptList.length === 0) return true;

  return acceptList.some((entry) => {
    if (entry.startsWith(".")) {
      return file.name.toLowerCase().endsWith(entry.toLowerCase());
    }

    if (entry.endsWith("/*")) {
      const base = entry.replace("/*", "");
      return file.type.startsWith(`${base}/`);
    }

    if (entry.includes("/")) {
      return file.type === entry;
    }

    return file.name.toLowerCase().endsWith(entry.toLowerCase());
  });
};

const getFileIcon = (file: File) => {
  if (file.type.startsWith("image/")) return ImageIcon;
  if (file.type.startsWith("audio/")) return AudioIcon;
  if (file.type.startsWith("video/")) return VideoIcon;
  if (file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf")) {
    return PdfIcon;
  }
  return FileIcon;
};

export const FileDropzone = React.forwardRef<HTMLDivElement, FileDropzoneProps>(
  (
    {
      className,
      accept,
      multiple = false,
      maxFiles,
      onFilesChange,
      ...props
    },
    ref
  ) => {
    const [isDragging, setIsDragging] = React.useState(false);
    const [files, setFiles] = React.useState<DropzoneFile[]>([]);
    const [errors, setErrors] = React.useState<string[]>([]);
    const inputRef = React.useRef<HTMLInputElement>(null);

    const acceptList = React.useMemo(() => parseAcceptList(accept), [accept]);

    React.useEffect(() => {
      if (files.length === 0) return;

      const timers = files.map((file) => {
        if (file.progress >= 100) return null;

        return window.setInterval(() => {
          setFiles((current) =>
            current.map((item) => {
              if (item.id !== file.id) return item;
              const nextProgress = Math.min(item.progress + 8, 100);
              return { ...item, progress: nextProgress };
            })
          );
        }, 300);
      });

      return () => {
        timers.forEach((timer) => timer && window.clearInterval(timer));
      };
    }, [files]);

    React.useEffect(() => {
      return () => {
        files.forEach((file) => {
          if (file.previewUrl) {
            URL.revokeObjectURL(file.previewUrl);
          }
        });
      };
    }, [files]);

    const handleFiles = (fileList: FileList | null) => {
      if (!fileList) return;

      const incoming = Array.from(fileList);
      const nextErrors: string[] = [];

      const accepted = incoming.filter((file) => {
        const valid = matchesAccept(file, acceptList);
        if (!valid) {
          nextErrors.push(`${file.name} is not an accepted file type.`);
        }
        return valid;
      });

      const limited = multiple ? accepted : accepted.slice(0, 1);
      const constrained =
        typeof maxFiles === "number"
          ? limited.slice(0, maxFiles)
          : limited;

      setErrors(nextErrors);

      if (constrained.length === 0) return;

      const nextFiles = constrained.map(createFileEntry);
      setFiles(nextFiles);
      onFilesChange?.(nextFiles.map((item) => item.file));
    };

    const handleRemove = (id: string) => {
      setFiles((current) => current.filter((file) => file.id !== id));
    };

    return (
      <div ref={ref} className={cn("w-full max-w-xl", className)} {...props}>
        <div
          className={cn(
            "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border bg-card px-6 py-10 text-center transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            isDragging && "bg-muted ring-2 ring-ring"
          )}
          onDragOver={(event) => {
            event.preventDefault();
            event.dataTransfer.dropEffect = "copy";
            setIsDragging(true);
          }}
          onDragLeave={() => setIsDragging(false)}
          onDrop={(event) => {
            event.preventDefault();
            setIsDragging(false);
            handleFiles(event.dataTransfer.files);
          }}
          onClick={() => inputRef.current?.click()}
          role="button"
          tabIndex={0}
          onKeyDown={(event) => {
            if (event.key === "Enter" || event.key === " ") {
              event.preventDefault();
              inputRef.current?.click();
            }
          }}
        >
          <div className="flex h-12 w-12 items-center justify-center rounded-full border border-border bg-background">
            <UploadIcon className="h-5 w-5 text-muted-foreground" />
          </div>
          <div className="space-y-1">
            <p className="text-sm font-semibold text-foreground">
              Drag files here or click to upload
            </p>
            <p className="text-xs text-muted-foreground">
              {accept
                ? `Accepted types: ${accept}`
                : "Upload files from your device"}
            </p>
          </div>
          <input
            ref={inputRef}
            type="file"
            className="hidden"
            accept={accept}
            multiple={multiple}
            onChange={(event) => handleFiles(event.target.files)}
          />
        </div>

        {errors.length > 0 ? (
          <div className="mt-3 space-y-1 rounded-lg border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
            {errors.map((error) => (
              <p key={error}>{error}</p>
            ))}
          </div>
        ) : null}

        {files.length > 0 ? (
          <div className="mt-4 space-y-3">
            {files.map((file) => {
              const FileTypeIcon = getFileIcon(file.file);

              return (
                <div
                  key={file.id}
                  className="rounded-lg border border-border bg-card p-3"
                >
                  <div className="flex items-center justify-between gap-3">
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-md border border-border bg-background">
                        {file.previewUrl ? (
                          <img
                            src={file.previewUrl}
                            alt={file.file.name}
                            className="h-full w-full object-cover"
                          />
                        ) : (
                          <FileTypeIcon className="h-4 w-4 text-muted-foreground" />
                        )}
                      </div>
                      <div>
                        <p className="text-sm font-medium text-foreground">
                          {file.file.name}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {(file.file.size / 1024).toFixed(1)} KB
                        </p>
                      </div>
                    </div>
                    <button
                      type="button"
                      className="rounded-md border border-border p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                      onClick={() => handleRemove(file.id)}
                      aria-label={`Remove ${file.file.name}`}
                    >
                      <CloseIcon className="h-4 w-4" />
                    </button>
                  </div>
                  <div className="mt-3">
                    <div className="flex items-center justify-between text-xs text-muted-foreground">
                      <span>Uploading</span>
                      <span>{file.progress}%</span>
                    </div>
                    <div className="mt-2 h-2 w-full rounded-full bg-muted">
                      <div
                        className="h-2 rounded-full bg-foreground transition-all"
                        style={{ width: `${file.progress}%` }}
                      />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : null}
      </div>
    );
  }
);

FileDropzone.displayName = "FileDropzone";
File Dropzone

Dependencies

Files

Installation
