Reactで<input type="file" webkitdirectory />が動かない時の対処法 #JavaScript

<input type="file" webkitdirectory />は、Chromium系ブラウザでディレクトリごとファイルを選択するタグですが、Reactで使うのに一工夫必要だったのでメモします。

普通にそのまま書いた場合

<input type="file" webkitdirectory />

Type '{ type: string; webkitdirectory: true; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.

does not existって怒られてしまいます。

解決策

<input
  type="file"
  directory=""
  webkitdirectory=""
/>

directory="" webkitdirectory=""と書くと動くようになります。

TypeScriptを使っている場合

<input
  type="file"
  /* @ts-expect-error */
  directory=""
  webkitdirectory=""
/>

/* @ts-expect-error */で強制的に黙らせます。