HTML5でファイル入力の値を記憶して再設定する方法（ドラッグ＆ドロップ活用）

ファイル選択欄（input type="file"）に、一度選択したファイルをドラッグ＆ドロップで再設定する方法を解説します。以前はこの操作は実現できませんでしたが、現在ではHTML5のDataTransferオブジェクトを利用することで、正当な形でファイル入力欄へファイルを再入力（再設定）できるようになりました。

ドロップイベントでファイルを取得する

まず、ドロップイベントからdataTransferフィールドを取り出し、そこに含まれるファイル一覧を取得します。取得したファイルは、後述のhandleFiles()関数で処理します。

function drop(ev) {
    ev.stopPropagation();
    ev.preventDefault();

    // イベントからdataTransferフィールドを取得
    var d = ev.dataTransfer;
    var files = d.files;
    handleFiles(files);
}

ドラッグ＆ドロップのイベント処理を実装する

ドラッグ＆ドロップを正しく動作させるには、dragover・dragleave・dropの3つのイベントをターゲット要素に登録します。それぞれの役割は以下のとおりです。

dragover（ドラッグ中）

要素の上でファイルがドラッグされている間の処理です。preventDefault()を呼び出してデフォルト動作を無効化し、ドラッグ中であることを示すCSSクラスを追加します。

// ドラッグ中
target.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    body.classList.add('dragging');
});

dragleave（ドラッグが離れたとき）

ファイルが要素から離れたときに、ドラッグ中を示すスタイルを解除します。

// ドラッグが離れたとき
target.addEventListener('dragleave', () => {
    body.classList.remove('dragging');
});

drop（ドロップされたとき）

ファイルがドロップされた時点の処理です。デフォルト動作を無効化し、スタイルを解除した上で、先ほどのdrop()関数を呼び出してファイルを取得します。

// ドロップターゲット
target.addEventListener('drop', (ev) => {
    ev.preventDefault();
    body.classList.remove('dragging');
});

取得したファイルを入力欄に再設定する

ドラッグ＆ドロップで取得したFileListを、ファイル入力欄に再設定するにはDataTransferコンストラクタを利用します。以下のように、新しいDataTransferオブジェクトを作成し、そのfilesプロパティを入力欄に代入するだけで完了です。

function handleFiles(files) {
    const dt = new DataTransfer();
    files.forEach((file) => dt.items.add(file));
    fileInput.files = dt.files;
}

この手法を使えば、ユーザーがドロップしたファイルをそのまま<input type="file">の値として記憶できるため、フォーム送信時にもドロップしたファイルを確実に扱うことができます。