JavaScript でドロップしたファイルを読み込む

ウェブページにドロップしたファイルを読み込む方法です。 dataTransfer というのを使うのだそうですが、 MDN を読んでも何を言っているんだか理解できません。サンプルコードもないし。個人サイトを参考にミニマルな記述を模索しました。

コード

window.addEventListener("dragover", event => {
  event.preventDefault()
})
window.addEventListener("drop", event => {
  event.preventDefault()
  let fr = new FileReader()
  fr.readAsText(event.dataTransfer.files[0])
  fr.addEventListener("load", () => {
    console.log(fr.result)
  })
})

解説

下のコードはブラウザが別タブで開いてしまうのを避けるために必要です。

window.addEventListener("dragover", event => {
  event.preventDefault()
})
window.addEventListener("drop", event => {
  event.preventDefault()
})

で、 FileReader() というのでオブジェクトを初期化するのだそうです。

let fr = new FileReader()

それでイベントから dataTransfer でファイルを取得します。複数のファイルが配列で取得されるようですが、今回は 1 つだけに限定しました。

event.dataTransfer.files[0]

そこから readAsText() というやつで fileReader() のオブジェクトに読ませます。

fr.readAsText(event.dataTransfer.files[0])

fileReader() オブジェクトがファイルをロードしたら目的の処理に渡します。

fr.addEventListener("load", () => {
  console.log(fr.result)
})