Drag-and-drop file hook

import { useCallback, useRef, useState, type DragEvent, type ChangeEvent } from 'react';

type Options = { accept?: string[]; multiple?: boolean };

// Matches "image/*", "application/pdf" or ".png" against a file.
function matches(file: File, patterns: string[]): boolean {
  if (patterns.length === 0) return true;
  return patterns.some((p) => {
    if (p.startsWith('.')) return file.name.toLowerCase().endsWith(p.toLowerCase());
    if (p.endsWith('/*')) return file.type.startsWith(p.slice(0, -1));
    return file.type === p;
  });
}

export function useFileDrop(onFiles: (files: File[]) => void, { accept = [], multiple = true }: Options = {}) {
  const [dragging, setDragging] = useState(false);
  const depth = useRef(0); // enter/leave pairs fire for every child element
  const input = useRef<HTMLInputElement | null>(null);

  const deliver = useCallback(
    (list: FileList | null) => {
      const files = Array.from(list ?? []).filter((f) => matches(f, accept));
      if (files.length) onFiles(multiple ? files : files.slice(0, 1));
    },
    [accept, multiple, onFiles],
  );

  const bind = {
    onDragEnter: (e: DragEvent) => {
      e.preventDefault();
      depth.current += 1;
      setDragging(true);
    },
    onDragOver: (e: DragEvent) => e.preventDefault(), // required to allow a drop
    onDragLeave: () => {
      depth.current = Math.max(0, depth.current - 1);
      if (depth.current === 0) setDragging(false);
    },
    onDrop: (e: DragEvent) => {
      e.preventDefault();
      depth.current = 0;
      setDragging(false);
      deliver(e.dataTransfer.files);
    },
  };

  const inputProps = {
    ref: input,
    type: 'file' as const,
    accept: accept.join(','),
    multiple,
    onChange: (e: ChangeEvent<HTMLInputElement>) => {
      deliver(e.target.files);
      e.target.value = ''; // allow picking the same file twice
    },
  };

  return { bind, dragging, inputProps, openPicker: () => input.current?.click() };
}