Reactで、ファイルをドラッグして置ける場所を作る方法

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

type Props = {
  // 受け付ける種類。'image/*' のような書き方と 'application/pdf' のような書き方が使える
  accept: string[];
  onFiles: (files: File[]) => void;
};

// ドラッグしているものにファイルが含まれるか。中身は drop まで読めないが、types は読める
function hasFiles(e: DragEvent | globalThis.DragEvent) {
  return e.dataTransfer?.types.includes('Files') ?? false;
}

function isAccepted(file: File, accept: string[]) {
  return accept.some((type) =>
    type.endsWith('/*') ? file.type.startsWith(type.slice(0, -1)) : file.type === type,
  );
}

export function DropZone({ accept, onFiles }: Props) {
  const [dragging, setDragging] = useState(false);
  const [message, setMessage] = useState('');
  // 中の要素に入るたびに dragenter と dragleave が届くので、入った回数を数える
  const depth = useRef(0);
  const inputRef = useRef<HTMLInputElement>(null);

  // 枠の外にファイルを落としたとき、ブラウザがそのファイルを開かないようにする
  useEffect(() => {
    const onDragOver = (e: globalThis.DragEvent) => {
      if (!hasFiles(e)) return;
      e.preventDefault();
      e.dataTransfer!.dropEffect = 'none';
    };
    const onDrop = (e: globalThis.DragEvent) => {
      if (hasFiles(e)) e.preventDefault();
    };
    window.addEventListener('dragover', onDragOver);
    window.addEventListener('drop', onDrop);
    return () => {
      window.removeEventListener('dragover', onDragOver);
      window.removeEventListener('drop', onDrop);
    };
  }, []);

  const receive = (list: FileList) => {
    const files = [...list];
    const accepted = files.filter((file) => isAccepted(file, accept));
    const rejected = files.length - accepted.length;
    setMessage(
      `${accepted.length}件を受け付けました` +
        (rejected > 0 ? `（対応していない種類の${rejected}件を除きました）` : ''),
    );
    if (accepted.length > 0) onFiles(accepted);
  };

  const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {
    if (!hasFiles(e)) return;
    depth.current += 1;
    setDragging(true);
  };

  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
    if (!hasFiles(e)) return;
    e.preventDefault(); // これがないと drop が届かない
    e.stopPropagation(); // window の dragover で dropEffect を none にさせない
    e.dataTransfer.dropEffect = 'copy';
  };

  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
    if (!hasFiles(e)) return;
    depth.current -= 1;
    if (depth.current === 0) setDragging(false);
  };

  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
    if (!hasFiles(e)) return;
    e.preventDefault();
    depth.current = 0;
    setDragging(false);
    receive(e.dataTransfer.files);
  };

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) receive(e.target.files);
    e.target.value = ''; // 同じファイルをもう一度選んでも change が届くようにする
  };

  return (
    <div
      className={dragging ? 'dropzone dragging' : 'dropzone'}
      onDragEnter={handleDragEnter}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      <p>ここにファイルをドラッグ</p>
      <button type="button" onClick={() => inputRef.current?.click()}>
        ファイルを選ぶ
      </button>
      <input
        ref={inputRef}
        type="file"
        multiple
        accept={accept.join(',')}
        hidden
        onChange={handleChange}
      />
      <p role="status">{message}</p>
    </div>
  );
}

<DropZone accept={['image/*', 'application/pdf']} onFiles={add} />

--- 4. dragover で preventDefault を呼ばない版 ---
drop イベントの回数: 0

dragenter: types=["Files"] files.length=0 items=["file:image/png","file:application/pdf"] names=[]
dragover: types=["Files"] files.length=0 items=["file:image/png","file:application/pdf"] names=[]
drop: types=["Files"] files.length=2 items=["file:image/png","file:application/pdf"] names=["cat.png","memo.pdf"]

--- 3. dragleave ですぐ強調を消す版 ---
枠の中の文字の上: 強調=true status="" 一覧=[] URL=http://localhost:5173/?variant=naive-leave
枠の中のボタンの上: 強調=false status="" 一覧=[] URL=http://localhost:5173/?variant=naive-leave

--- 2. DropZone の強調と受け取り ---
枠の外: 強調=false status="" 一覧=[] URL=http://localhost:5173/
枠の中の文字の上: 強調=true status="" 一覧=[] URL=http://localhost:5173/
枠の中のボタンの上: 強調=true status="" 一覧=[] URL=http://localhost:5173/
枠の外に戻る: 強調=false status="" 一覧=[] URL=http://localhost:5173/
もう一度ボタンの上: 強調=true status="" 一覧=[] URL=http://localhost:5173/
ボタンの上で落とす: 強調=false status="2件を受け付けました（対応していない種類の1件を除きました）" 一覧=["cat.png（image/png、120バイト）","memo.pdf（application/pdf、15バイト）"] URL=http://localhost:5173/

--- 5. window で止めない版で、枠の外に落とす ---
ページの移動: なし
window に届いたイベント: ["dragover（preventDefault 済み=false、dropEffect=copy）"]
--- 6. DropZone で、枠の外に落とす ---
ページの移動: なし
window に届いたイベント: ["dragover（preventDefault 済み=true、dropEffect=none）"]

window に届いたイベント: ["drop（preventDefault 済み=true、dropEffect=copy）"]
枠の中に落としたあと: 強調=false status="1件を受け付けました" 一覧=["cat.png（image/png、120バイト）"] URL=http://localhost:5173/

--- 10. value を空に戻さない input で、同じファイルを2回選ぶ ---
1回目に cat.png を選んだあとの change の回数: 1
2回目に cat.png を選んだあとの change の回数: 1