HTMLとJavaScriptで作るページ全体のドラッグ＆ドロップファイルアップロード機能

Webアプリケーションでファイルをアップロードする際、従来の「ファイル選択」ボタンだけでなく、ページ全体にファイルをドラッグ＆ドロップできるUIを実装すると、ユーザー体験が大きく向上します。

この記事では、HTMLとJavaScript（バニラJS）のみを使って、画面全体をドロップゾーンとして扱う方法を解説します。ライブラリに依存しないため、軽量でカスタマイズしやすいのが特徴です。

実装のポイント

ページ全体でのドラッグ＆ドロップを実現するには、以下の3つの要素が重要になります。

• dragenter / dragover イベントの制御： ブラウザのデフォルト動作（ファイルを開く）を防ぐため、preventDefault() を必ず呼び出します。
• ドロップゾーンの表示・非表示： ドラッグ操作が始まったらオーバーレイを表示し、離れたら非表示にします。
• drop イベントでの処理： ドロップされたファイルを受け取り、アップロード処理につなげます。

サンプルコード

以下のコードは、ドラッグ操作中にドロップゾーンを表示し、ファイルがドロップされたタイミングで処理を実行する基本的な実装例です。

var myDrop = document.getElementById('dropZone');

// ドロップゾーンを表示
function displayDropZone() {
    myDrop.style.visibility = "visible";
}

// ドロップゾーンを非表示
function hideDropZone() {
    myDrop.style.visibility = "hidden";
}

// デフォルト動作を無効化し、コピー効果を設定
function allowDrag(ev) {
    if (true) {
        ev.dataTransfer.dropEffect = 'copy';
        ev.preventDefault();
    }
}

// ファイルがドロップされたときの処理
function handleDrop(ev) {
    ev.preventDefault();
    hideDropZone();
    alert('This is Drop!');
}

// ウィンドウ全体でドラッグ開始を検知
window.addEventListener('dragenter', function(ev) {
    displayDropZone();
});

myDrop.addEventListener('dragenter', allowDrag);
myDrop.addEventListener('dragover', allowDrag);
myDrop.addEventListener('dragleave', function(e) {
    hideDropZone();
});
myDrop.addEventListener('drop', handleDrop);

コードの解説

1. ドロップゾーンの表示制御

window に対して dragenter イベントリスナーを登録することで、ユーザーがウィンドウ上のどこかにファイルをドラッグした瞬間を検知できます。ここで displayDropZone() を呼び出し、全画面オーバーレイとしてドロップゾーンを表示します。

2. デフォルト動作の防止

allowDrag() 関数内の ev.preventDefault() は非常に重要です。これがないと、ブラウザがデフォルトの動作（ドロップされたファイルをそのまま開く）を実行してしまい、意図した挙動になりません。また、dropEffect = 'copy' を指定することで、ドラッグ中のカーソルに「コピー」のアイコンが表示され、ユーザーに分かりやすいフィードバックを与えられます。

3. ドロップ時の処理

handleDrop() 内では、まず preventDefault() を呼び出してから、実際のファイル処理を行います。実運用では alert() の代わりに、ev.dataTransfer.files からドロップされたファイル一覧を取得し、FormData オブジェクトに格納してサーバーへ送信するのが一般的です。

実装時の注意点

• dragleave の連続発火： 子要素間を移動すると dragleave が何度も発火し、ドロップゾーンが点滅することがあります。カウンター方式や relatedTarget の判定で対策しましょう。
• モバイル対応： iOSやAndroidのブラウザではドラッグ＆ドロップがサポートされていない場合があるため、フォールバックとして通常のファイル選択inputも併設することをおすすめします。
• アクセシビリティ： キーボード操作でもファイルを選択できるよう、従来型のinput要素との併用を検討してください。

この基本コードをベースに、ファイルサイズのバリデーションやプレビュー表示、複数ファイル対応などを追加すれば、本格的なアップロードUIへと発展させることができます。