ウェブページにドロップしたファイルを読み込む方法です。 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)
})
