Reactで、フォルダーを選んで中のファイルを一覧にする方法

error TS2322: Type '{ type: "file"; webkitdirectory: string; onChange: (e: ChangeEvent<HTMLInputElement, HTMLInputElement>) => void; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.

// react-webkitdirectory.d.ts
// @types/react の input の属性に webkitdirectory を足す
import 'react';

declare module 'react' {
  interface InputHTMLAttributes<T> {
    webkitdirectory?: string;
  }
}

Received `true` for a non-boolean attribute `webkitdirectory`.

cat-album/
├── .hiddenrc
├── .thumbs/a.bin
├── 2026/夏/data.json
├── 2026/夏/hammock.png
├── 2026/春/memo.txt
├── 2026/春/桜と猫.jpg
├── README.md
├── link-to-2026 → 2026 を指すシンボリックリンク
├── link-to-readme.md → README.md を指すシンボリックリンク
└── 空のフォルダー/

// fileTree.ts
export type FileRow = {
  path: string; // 選んだフォルダーからの相対パス（例：photos/2026/cat.png）
  size: number;
  type: string;
  file: File;
};

// FileList は input の値を消すと空になるので、先に配列へ移す
export function toRows(files: FileList | null): FileRow[] {
  return Array.from(files ?? [], (file) => ({
    path: file.webkitRelativePath || file.name,
    size: file.size,
    type: file.type,
    file,
  })).sort((a, b) => a.path.localeCompare(b.path, 'ja'));
}

// パスの途中に「.」で始まる名前があるもの（.git/ や .DS_Store など）
export const isHidden = (path: string) =>
  path.split('/').some((part) => part.startsWith('.'));

// フォルダーごとにまとめ、フォルダーのパス（例：photos/2026）の順に並べる
export function groupByFolder(rows: FileRow[]): [string, FileRow[]][] {
  const groups = new Map<string, FileRow[]>();
  for (const row of rows) {
    const folder = row.path.split('/').slice(0, -1).join('/');
    const list = groups.get(folder) ?? [];
    list.push(row);
    groups.set(folder, list);
  }
  return [...groups].sort(([a], [b]) => a.localeCompare(b, 'ja'));
}

export function formatBytes(n: number): string {
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
  return `${(n / 1024 / 1024).toFixed(1)} MB`;
}

// FolderFileList.tsx
import { useState } from 'react';
import { toRows, isHidden, groupByFolder, formatBytes, type FileRow } from './fileTree';

export function FolderFileList() {
  const [rows, setRows] = useState<FileRow[]>([]);
  const [showHidden, setShowHidden] = useState(false);

  const visible = showHidden ? rows : rows.filter((r) => !isHidden(r.path));
  const total = visible.reduce((sum, r) => sum + r.size, 0);
  const groups = groupByFolder(visible);

  return (
    <div className="demo">
      <label className="picker">
        フォルダーを選ぶ
        <input
          type="file"
          webkitdirectory=""
          onChange={(e) => setRows(toRows(e.currentTarget.files))}
        />
      </label>
      <label>
        <input
          type="checkbox"
          checked={showHidden}
          onChange={(e) => setShowHidden(e.currentTarget.checked)}
        />
        「.」で始まるファイルも出す
      </label>
      <p className="summary">
        {visible.length} 個のファイル（合計 {formatBytes(total)}）
        {rows.length > visible.length && `、ほかに隠しファイル ${rows.length - visible.length} 個`}
      </p>
      {groups.map(([folder, list]) => (
        <section key={folder}>
          <h3>{folder}/</h3>
          <ul>
            {list.map((r) => (
              <li key={r.path}>
                <span className="name">{r.file.name}</span>
                <span className="size">{formatBytes(r.size)}</span>
              </li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}

await page.locator('input[type=file]').setInputFiles('fixture/cat-album');

locator.setInputFiles: Error: File input does not support directories, pass individual files instead