HTML5の複数の「input:file」からFileListのアイテムを削除する方法

JavaScriptでファイルアップロード機能を実装していると、input type="file" で選択されたファイルの一覧（FileList オブジェクト）から、特定のアイテムを削除したい場面に遭遇することがあります。しかし、FileList オブジェクトは読み取り専用のため、直接要素を削除することはできません。

FileListが直接操作できない理由

FileList はDOM APIによって管理される特殊なオブジェクトであり、splice() のような配列操作メソッドを持っていません。そのため、選択されたファイルのリストから任意の項目を取り除きたい場合は、一度通常の配列に変換してから操作する必要があります。

配列への変換と削除の手順

まず、対象の input 要素から files プロパティを取得します。

$('input:file#upload')[1].files

次に、この FileList を配列へ変換します。変換には以下のような方法が使えます。

// スプレッド構文を使用する方法
const fileArray = [...document.querySelector('#upload').files];

// Array.from() を使用する方法
const fileArray = Array.from(document.querySelector('#upload').files);

配列に変換できたら、splice() メソッドなどを使って自由にアイテムを削除できます。

// インデックス1（2番目）のファイルを削除する例
fileArray.splice(1, 1);

削除後は、この配列を使ってアップロード処理やプレビュー表示などを行います。FormData にファイルを追加する場合も、元の FileList ではなく、この操作済みの配列をループして append() していきます。

代替アプローチ：HTMLのファイルアップローダーとJavaScriptの併用

もう一つの方法として、HTMLのファイルアップローダーでファイルを選択した後、対応するオブジェクトをJavaScript側で削除するというアプローチもあります。この場合、UI上にサムネイルやファイル名のリストを表示し、各項目に削除ボタンを設置しておくと、ユーザーが直感的にファイルを管理できるようになります。

// 削除ボタンクリック時に該当ファイルを配列から除去する例
deleteButton.addEventListener('click', () => {
  fileArray = fileArray.filter(file => file.name !== targetFileName);
});

まとめ

FileList オブジェクトは読み取り専用のため直接編集できませんが、スプレッド構文や Array.from() で配列化すれば、splice() や filter() を使って柔軟にファイルの追加・削除が可能になります。ユーザーが選択したファイルを事前に確認・整理できるようにしておくことで、より使いやすいアップロードフォームを実現できます。