File drop

"use client";

import { useId, useRef, useState } from "react";
import type { ComponentProps, DragEvent, ReactNode } from "react";
import { Button } from "./button";
import { Truncate } from "./truncate";
import "./file-drop.css";

/** True when there is something to render; false, null and "" count as nothing. */
function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

function formatSize(bytes: number): string {
  if (bytes < 1000) return `${bytes} B`;
  const units = ["KB", "MB", "GB", "TB"];
  let n = bytes / 1000;
  let unit = 0;
  while (n >= 1000 && unit < units.length - 1) {
    n /= 1000;
    unit += 1;
  }
  return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[unit]}`;
}

/** The same rules as the accept attribute: extensions, exact types and type/* wildcards. */
function matches(file: File, accept: string | undefined): boolean {
  if (!accept) return true;
  const fileName = file.name.toLowerCase();
  const type = file.type.toLowerCase();
  return accept
    .split(",")
    .map((rule) => rule.trim().toLowerCase())
    .filter(Boolean)
    .some((rule) =>
      rule.startsWith(".") ? fileName.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule,
    );
}

type Listed = { name: string; size: number };
type Refusal = { name: string; reason: string };

export type FileDropProps = Omit<ComponentProps<"div">, "onChange"> & {
  label: ReactNode;
  /** Same format as the native attribute, e.g. ".pdf,image/*". Also checked for dropped files. */
  accept?: string;
  multiple?: boolean;
  /** Largest accepted file, in bytes. */
  maxSize?: number;
  /** Most files at once when multiple is set. */
  maxFiles?: number;
  onFilesChange?: (files: File[]) => void;
  /** Upload progress by file name, 0 to 1. A file with an entry shows a bar. */
  progress?: Record<string, number>;
  /** Shown in the zone and read as its description, e.g. the accepted types and sizes. */
  hint?: ReactNode;
  disabled?: boolean;
  name?: string;
  /** Rows to show before anything is chosen, such as files already on the server. Display only. */
  defaultFiles?: Listed[];
};

export function FileDrop({
  label,
  accept,
  multiple = false,
  maxSize,
  maxFiles,
  onFilesChange,
  progress,
  hint,
  disabled = false,
  name,
  defaultFiles,
  className,
  ...rest
}: FileDropProps) {
  const id = useId();
  const input = useRef<HTMLInputElement>(null);
  const depth = useRef(0);
  const [files, setFiles] = useState<File[]>([]);
  const [listed, setListed] = useState<Listed[]>(defaultFiles ?? []);
  const [refused, setRefused] = useState<Refusal[]>([]);
  const [dragging, setDragging] = useState(false);
  const limit = multiple ? (maxFiles ?? Infinity) : 1;

  const labelId = `${id}-label`;
  const hintId = present(hint) ? `${id}-hint` : undefined;
  const errorId = `${id}-error`;

  // The input's own file list is rewritten on every change, so a form submits what is shown.
  const sync = (next: File[]) => {
    setFiles(next);
    if (input.current) {
      const transfer = new DataTransfer();
      for (const file of next) transfer.items.add(file);
      input.current.files = transfer.files;
    }
    onFilesChange?.(next);
  };

  const add = (incoming: File[]) => {
    const refusals: Refusal[] = [];
    const ok: File[] = [];
    for (const file of incoming) {
      if (!matches(file, accept)) refusals.push({ name: file.name, reason: "type not accepted" });
      else if (maxSize !== undefined && file.size > maxSize) refusals.push({ name: file.name, reason: `over ${formatSize(maxSize)}` });
      else ok.push(file);
    }
    let next = files;
    if (multiple) {
      next = files.filter((f) => !ok.some((o) => o.name === f.name));
      for (const file of ok) {
        if (listed.length + next.length < limit) next.push(file);
        else refusals.push({ name: file.name, reason: `only ${limit} files allowed` });
      }
    } else if (ok.length > 0) {
      next = [ok[0]];
      setListed([]);
      for (const file of ok.slice(1)) refusals.push({ name: file.name, reason: "only one file allowed" });
    }
    setRefused(refusals);
    sync(next);
  };

  const afterRemove = () => {
    setRefused([]);
    input.current?.focus();
  };

  const onDragEnter = (event: DragEvent<HTMLLabelElement>) => {
    if (disabled || !event.dataTransfer.types.includes("Files")) return;
    event.preventDefault();
    depth.current += 1;
    setDragging(true);
  };

  const onDragOver = (event: DragEvent<HTMLLabelElement>) => {
    if (disabled || !event.dataTransfer.types.includes("Files")) return;
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
  };

  // Entering a child fires leave on the parent first, so a depth count decides when it is really gone.
  const onDragLeave = () => {
    depth.current = Math.max(0, depth.current - 1);
    if (depth.current === 0) setDragging(false);
  };

  const onDrop = (event: DragEvent<HTMLLabelElement>) => {
    depth.current = 0;
    setDragging(false);
    if (disabled) return;
    event.preventDefault();
    add(Array.from(event.dataTransfer.files));
  };

  const rows = [
    ...listed.map((f) => ({
      key: `listed-${f.name}`,
      name: f.name,
      size: f.size,
      remove: () => {
        setListed((all) => all.filter((x) => x !== f));
        afterRemove();
      },
    })),
    ...files.map((f, i) => ({
      key: `file-${i}-${f.name}`,
      name: f.name,
      size: f.size,
      remove: () => {
        sync(files.filter((x) => x !== f));
        afterRemove();
      },
    })),
  ];

  return (
    <div
      {...rest}
      className={["eq-file-drop", className].filter(Boolean).join(" ")}
      data-dragging={dragging || undefined}
      data-disabled={disabled || undefined}
    >
      <span className="eq-file-drop-label" id={labelId}>
        {label}
      </span>
      <label className="eq-file-drop-zone" onDragEnter={onDragEnter} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
        <input
          ref={input}
          type="file"
          className="eq-file-drop-input"
          name={name}
          accept={accept}
          multiple={multiple}
          disabled={disabled}
          aria-labelledby={labelId}
          aria-describedby={[hintId, refused.length > 0 ? errorId : undefined].filter(Boolean).join(" ") || undefined}
          onChange={(event) => add(Array.from(event.target.files ?? []))}
          // Space opens the picker natively everywhere; Enter does not in every engine.
          onKeyDown={(event) => {
            if (event.key !== "Enter") return;
            event.preventDefault();
            event.currentTarget.click();
          }}
        />
        <svg className="eq-file-drop-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M10 13V3.75M6.25 7.5 10 3.75l3.75 3.75M3.75 12.5v2.25c0 .83.67 1.5 1.5 1.5h9.5c.83 0 1.5-.67 1.5-1.5V12.5" />
        </svg>
        <span className="eq-file-drop-text">
          <span className="eq-file-drop-cta">
            Drop {multiple ? "files" : "a file"} or <span className="eq-file-drop-browse">browse</span>
          </span>
          {present(hint) && (
            <span className="eq-file-drop-hint" id={hintId}>
              {hint}
            </span>
          )}
        </span>
      </label>
      <p className="eq-file-drop-error" id={errorId} aria-live="polite">
        {refused.length > 0 && `Not added: ${refused.map((r) => `${r.name} (${r.reason})`).join(", ")}.`}
      </p>
      {rows.length > 0 && (
        <ul className="eq-file-drop-list" aria-label="Chosen files">
          {rows.map((row) => {
            const value = progress?.[row.name];
            return (
              <li key={row.key} className="eq-file-drop-file">
                <svg className="eq-file-drop-file-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M9.25 1.75H4.5c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h7c.69 0 1.25-.56 1.25-1.25V5.25l-3.5-3.5Z" />
                  <path d="M9.25 1.75v3.5h3.5" />
                </svg>
                <Truncate className="eq-file-drop-name" keep={8}>
                  {row.name}
                </Truncate>
                <span className="eq-file-drop-size">{formatSize(row.size)}</span>
                <Button
                  variant="quiet"
                  size="xs"
                  square
                  className="eq-file-drop-remove"
                  aria-label={`Remove ${row.name}`}
                  disabled={disabled}
                  onClick={row.remove}
                  lead={
                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
                      <path d="m4.5 4.5 7 7m0-7-7 7" />
                    </svg>
                  }
                />
                {value !== undefined && (
                  <progress className="eq-file-drop-progress" max={1} value={Math.max(0, Math.min(1, value))} aria-label={`Uploading ${row.name}`} />
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}