"use client";

import * as React from "react";

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

type FileWithMeta = {
  id: string;
  file: File;
  previewUrl?: string;
  progress: number;
  status: "uploading" | "complete" | "error";
};

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

const createFileEntry = (file: File): FileWithMeta => {
  const previewUrl = file.type.startsWith("image/")
    ? URL.createObjectURL(file)
    : undefined;

  return {
    id: `${file.name}-${file.lastModified}-${Math.random()
      .toString(36)
      .slice(2)}`,
    file,
    previewUrl,
    progress: 0,
    status: "uploading",
  };
};

const UploadIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M10 3v9m0-9 3.5 3.5M10 3 6.5 6.5"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M4 13.5v2A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-2"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
    />
  </svg>
);

const CloseIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M5 5l10 10M15 5 5 15"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
    />
  </svg>
);

const ImageIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <rect
      x="3"
      y="4"
      width="14"
      height="12"
      rx="2"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
    />
    <circle cx="7" cy="8" r="1.5" fill="currentColor" />
    <path
      d="M3 13l4-3 3 2 4-4 3 3"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const PdfIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M5 3.5h6l4 4v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1Z"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinejoin="round"
    />
    <path
      d="M11 3.5v4h4"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
    />
    <text
      x="6"
      y="14"
      fontSize="5"
      fontWeight="bold"
      fill="currentColor"
      fontFamily="system-ui"
    >
      PDF
    </text>
  </svg>
);

const VideoIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <rect
      x="2"
      y="5"
      width="12"
      height="10"
      rx="2"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
    />
    <path
      d="M14 8l4-2v8l-4-2"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const AudioIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M10 3v14M6 6v8M14 6v8M2 8v4M18 8v4"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
    />
  </svg>
);

const CodeIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M7 6L3 10l4 4M13 6l4 4-4 4M11 4l-2 12"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const ZipIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M5 3.5h6l4 4v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1Z"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinejoin="round"
    />
    <path
      d="M9 5h2M9 7h2M9 9h2M9 11h2M9 13v2h2v-2z"
      fill="none"
      stroke="currentColor"
      strokeWidth="1"
      strokeLinecap="round"
    />
  </svg>
);

const FileIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M5 3.5h6l4 4v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1Z"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinejoin="round"
    />
    <path
      d="M11 3.5v4h4"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
    />
  </svg>
);

const CheckIcon = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 20 20" className={className} aria-hidden="true">
    <path
      d="M4 10l4 4 8-8"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const getFileIcon = (file: File) => {
  const type = file.type;
  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";

  if (type.startsWith("image/")) return ImageIcon;
  if (type === "application/pdf" || ext === "pdf") return PdfIcon;
  if (type.startsWith("video/")) return VideoIcon;
  if (type.startsWith("audio/")) return AudioIcon;
  if (
    type.includes("zip") ||
    type.includes("compressed") ||
    ["zip", "rar", "7z", "tar", "gz"].includes(ext)
  )
    return ZipIcon;
  if (
    type.includes("javascript") ||
    type.includes("json") ||
    type.includes("html") ||
    type.includes("css") ||
    type.includes("xml") ||
    ["js", "ts", "jsx", "tsx", "json", "html", "css", "xml", "py", "rb", "go", "rs"].includes(ext)
  )
    return CodeIcon;

  return FileIcon;
};

const formatFileSize = (bytes: number): string => {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
};

export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
  (
    {
      className,
      accept,
      multiple = false,
      maxFiles,
      maxSize,
      onFilesChange,
      simulateUpload = true,
      ...props
    },
    ref
  ) => {
    const [isDragging, setIsDragging] = React.useState(false);
    const [files, setFiles] = React.useState<FileWithMeta[]>([]);
    const [error, setError] = React.useState<string | null>(null);
    const inputRef = React.useRef<HTMLInputElement>(null);
    const progressIntervalsRef = React.useRef<Map<string, NodeJS.Timeout>>(
      new Map()
    );

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

    const updateFiles = (nextFiles: FileWithMeta[]) => {
      setFiles(nextFiles);
      onFilesChange?.(nextFiles.map((item) => item.file));
    };

    const simulateProgress = (fileId: string) => {
      if (!simulateUpload) {
        setFiles((prev) =>
          prev.map((f) =>
            f.id === fileId ? { ...f, progress: 100, status: "complete" } : f
          )
        );
        return;
      }

      const interval = setInterval(() => {
        setFiles((prev) =>
          prev.map((f) => {
            if (f.id !== fileId) return f;
            if (f.progress >= 100) {
              clearInterval(interval);
              progressIntervalsRef.current.delete(fileId);
              return { ...f, progress: 100, status: "complete" };
            }
            const increment = Math.random() * 15 + 5;
            const newProgress = Math.min(f.progress + increment, 100);
            return {
              ...f,
              progress: newProgress,
              status: newProgress >= 100 ? "complete" : "uploading",
            };
          })
        );
      }, 200);

      progressIntervalsRef.current.set(fileId, interval);
    };

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

      const incoming = Array.from(fileList);

      if (maxSize) {
        const oversized = incoming.filter((f) => f.size > maxSize);
        if (oversized.length > 0) {
          setError(`Some files exceed the ${formatFileSize(maxSize)} limit`);
          return;
        }
      }

      const entries = incoming.map(createFileEntry);
      const combined = multiple ? [...files, ...entries] : entries.slice(0, 1);
      const limited = maxFiles ? combined.slice(0, maxFiles) : combined;

      updateFiles(limited);

      entries.forEach((entry) => {
        if (limited.find((f) => f.id === entry.id)) {
          simulateProgress(entry.id);
        }
      });
    };

    const handleRemove = (id: string) => {
      const interval = progressIntervalsRef.current.get(id);
      if (interval) {
        clearInterval(interval);
        progressIntervalsRef.current.delete(id);
      }
      const nextFiles = files.filter((file) => file.id !== id);
      updateFiles(nextFiles);
    };

    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-2 border-dashed border-border bg-card px-6 py-10 text-center transition cursor-pointer",
            isDragging && "bg-muted border-border"
          )}
          onDragOver={(event) => {
            event.preventDefault();
            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 text-muted-foreground">
            <UploadIcon className="h-5 w-5" />
          </div>
          <div className="space-y-1">
            <p className="text-sm font-semibold text-foreground">
              {isDragging ? "Drop files here" : "Drag files here or click to upload"}
            </p>
            <p className="text-xs text-muted-foreground">
              {accept ? `Accepted: ${accept}` : "All file types supported"}
              {maxSize ? ` (max ${formatFileSize(maxSize)})` : ""}
            </p>
          </div>
          <input
            ref={inputRef}
            type="file"
            className="hidden"
            accept={accept}
            multiple={multiple}
            onChange={(event) => handleFiles(event.target.files)}
          />
        </div>

        {error ? (
          <p className="mt-2 text-sm text-primary">{error}</p>
        ) : null}

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

              return (
                <div
                  key={file.id}
                  className="flex flex-col gap-3 rounded-lg border border-border bg-card p-3"
                >
                  <div className="flex items-center gap-3">
                    <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-muted-foreground">
                      {file.previewUrl ? (
                        <img
                          src={file.previewUrl}
                          alt={file.file.name}
                          className="h-full w-full object-cover"
                        />
                      ) : (
                        <IconComponent className="h-5 w-5" />
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-foreground truncate">
                        {file.file.name}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {formatFileSize(file.file.size)}
                      </p>
                    </div>
                    <div className="flex items-center gap-2">
                      {isComplete ? (
                        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
                          <CheckIcon className="h-3.5 w-3.5" />
                        </span>
                      ) : (
                        <span className="text-xs font-medium text-muted-foreground">
                          {Math.round(file.progress)}%
                        </span>
                      )}
                      <button
                        type="button"
                        className="rounded-md border border-border p-1 text-muted-foreground transition hover:text-foreground hover:bg-muted focus-visible:outline-none focus-visible:bg-muted"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleRemove(file.id);
                        }}
                        aria-label={`Remove ${file.file.name}`}
                      >
                        <CloseIcon className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                  {!isComplete ? (
                    <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
                      <div
                        className="h-full bg-primary transition-all duration-200"
                        style={{ width: `${file.progress}%` }}
                      />
                    </div>
                  ) : null}
                </div>
              );
            })}
          </div>
        ) : null}
      </div>
    );
  }
);

FileUpload.displayName = "FileUpload";
File Upload

Dependencies

Files

Installation
