"use client";

import * as React from "react";

import { FileText, Upload, X } from "lucide-react";

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

type FileWithProgress = {
  id: string;
  file: File;
  progress: number;
};

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

const createFileEntry = (file: File): FileWithProgress => ({
  id: `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`,
  file,
  progress: 0,
});

export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
  ({ className, accept, multiple = false, onFilesChange, ...props }, ref) => {
    const [isDragging, setIsDragging] = React.useState(false);
    const [files, setFiles] = React.useState<FileWithProgress[]>([]);
    const inputRef = React.useRef<HTMLInputElement>(null);

    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]);

    const handleFiles = (fileList: FileList | null) => {
      if (!fileList) return;
      const nextFiles = Array.from(fileList).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",
            isDragging && "border-primary/60 bg-muted"
          )}
          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">
            <Upload 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">
              Supported formats based on your selection
            </p>
          </div>
          <input
            ref={inputRef}
            type="file"
            className="hidden"
            accept={accept}
            multiple={multiple}
            onChange={(event) => handleFiles(event.target.files)}
          />
        </div>

        {files.length > 0 ? (
          <div className="mt-4 space-y-3">
            {files.map((file) => (
              <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 rounded-md border border-border bg-background">
                      <FileText 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:text-foreground"
                    onClick={() => handleRemove(file.id)}
                  >
                    <X 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-primary transition-all"
                      style={{ width: `${file.progress}%` }}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : null}
      </div>
    );
  }
);

FileUpload.displayName = "FileUpload";
File Upload

Dependencies

Files

Installation
