Javascript (Web) でファイルのドラッグ&ドロップのメモ

ドラッグ&ドロップ

  • dragover イベントで preventDefault しないと、ブラウザがそのファイルを開いてしまいハンドリングできない
  • dragOver ではなく、 dragover である。スペルミスとかに対してなんのコンパイラ警告とかも出してくれないので、やっぱりJSはつらい
  • drop イベントの dataTransfer プロパティからドロップされたファイル情報を取ることができる
  • dataTransfer.filesFileList型 であり、File[]ではない Array.from() に渡してあげれば File[] に変換できる

ここを読めばだいたいOK

Web系は情報が大量にあるけど、古い情報もたくさんあって取捨選択が大変。とりあえずMDNを読んでおけば、だいたい最新の情報がつかめる。良い。

developer.mozilla.org