k8o

はじめに

<input>要素にtype="file"を付与すると、ファイルを入力するための要素になります。

<!-- 単一ファイル選択 -->
<input type="file" />

<!-- 複数ファイル選択 -->
<input type="file" multiple />

この機能に加えて、ディレクトリごと選択させるwebkitdirectory属性が、Firefox Androidの対応によってBaseline 2025に追加されました。

<!-- ディレクトリ選択 -->
<input type="file" webkitdirectory />

webkitdirectory属性

webkitdirectory属性にはユーザーにディレクトリの選択をさせるときにtrue、ファイルを選択するときはfalseを渡します。 デフォルトは挙動からもわかる通りfalseです。

ファイルの取得

webkitdirectory属性を付与した<input>要素で選択したファイルの取得は、multiple属性を指定した時の取得方法と同じようにfilesプロパティから取得します。

filesプロパティはFileListオブジェクトまたはnullを返します。

FileListオブジェクトはFileオブジェクトの集合体で、Fileは添え字からのアクセスとitem()メソッドでアクセスできます。また、FileListはイテレーターとしての機能も持っています。

const files = inputElement.files;

// 選択されたファイル数
console.log(files?.length);
// 添え字でのアクセス
console.log(files?.[0]);
// item()メソッドでのアクセス なければnullを返す
console.log(files?.item(0));
// イテレーターでのアクセス
for (const file of files ?? []) {
  console.log(file);
}

webkitdirectory属性を付与した<input>要素から入力されたFileは書き換え不可なwebkitRelativePathプロパティを持ちます。 このプロパティには、選択されたファイルの相対パスが格納されます。

const files = inputElement.files;

for (const file of files ?? []) {
  console.log(file.webkitRelativePath);
}

下記の例では渡したディレクトリに含まれるファイルのwebkitRelativePathプロパティを表示しています。

input要素が持つ複数のファイルを扱う別の方法としてwebkitEntriesプロパティがありますが、このプロパティはいくつかのブラウザでwebkitdirectory属性と併用できないようなので注意してください。

おわりに

input要素でファイルを扱う際に、webkitRelativePath属性を利用することでディレクトリごと選択可能になり、より高度なファイル操作が可能になりました。

webkitdirectory属性のようなwebkitprefixがついている機能は利用を躊躇いますが、Baseline 2025に追加されたことで安心して利用できるようになったのではないでしょうか。