Skip to content

ドラッグ&ドロップでファイルをアップロードする

PC に保存してあるファイルをドラッグ&ドロップしてブラウザ上に表示してみましょう。

実装のポイントは2つです。

  • ドロップを受け入れる要素の dragover イベントで preventDefault() を記述する。
  • ドロップを受け入れる要素の drop イベント内で DataTransfer オブジェクトにアクセスし、FileList オブジェクトを取得する。

dragover, drop イベント

まず利用するイベントは dragover, drop の2種類です。

dragover はドラッグ中のマウスが要素の上に来たときに発火し、drop は要素の上にアイテムをドロップしたときに発火します。

dragover イベントで preventDefault() を記述 しておかないと、ドロップに対してブラウザのデフォルトの動作が実行されてしまい、要素の drop イベントを発火させることができないので注意が必要です。

DataTransfer オブジェクト

画像ファイルなど、ドロップされるアイテムの情報は、DataTransfer というオブジェクトが保持しています。

DataTransfer はドラッグ、ドロップされるアイテムの情報だけでなく、ドラッグ&ドロップに関する様々なプロパティを持っています。詳しくは MDN などのサイトを参考にしてください。

参考:https://developer.mozilla.org/ja/docs/DragDrop/DataTransfer

サンプル

次のサンプルでは、DataTransfer オブジェクトから FileList を取得したあと、FileReader オブジェクトを利用してプレビューを表示します。FileReader を利用してプレビューを表示する方法については、以前記事を書いていますので良ければご覧ください。

index.html

script.js

補足

このサンプルには実装していませんが、ドラッグ中にはどこにドロップできるのか視覚的にフィードバックするとよいでしょう。dragenter, dragleave などのイベントを利用することで実装できます。

また、ドロップしたファイルは、input.files に FileList を代入することでアップロードできます。

ただし、ブラウザによっては上手くいかないこともありますので、その場合は Ajax を利用してください。FormData インターフェイスと組み合わせることで実現できます。

ちなみに、ドラッグ&ドロップはブラウザ外部からのドラッグなので、スマホでは動作しません。

Comments are closed.