JavaScriptを用いたドラッグ&ドロップによるファイル内容の取得

Question

###やりたいこと
適当なテキストファイルを画面上にドラッグ&ドロップし、その内容をJavaScriptで扱えるようにしたいと考えています。

###症状
ひとまず、問題の単純化のために下記のようなコードを作成して試してみたのですが、なぜか console.log(str); による出力結果が空になります。

###サンプルコード

<div ondragover="f1(event)" ondrop="f2(event)">
  ここにドラッグ&ドロップ
</div>

<script>
function f1(event)
{
   event.preventDefault();
   event.dataTransfer.dropEffect = "copy";
}

function f2(event)
{
   event.preventDefault();
   var f = event.dataTransfer;
   var str = f.getData("text");
   console.log(str);
}
</script>

なお、テキストファイルはtext.txtという名前でローカルフォルダに作成し、「hello, world!」という内容を保持しています。保存は確実にされており、text.txtの内容が空であるということはありません。

よろしくお願いいたします。

Answer 1

evt.dataTransfer.files からファイルを探して読み込む必要があります。

【JavaScript でのローカル ファイルの読み込み - HTML5 Rocks】
https://www.html5rocks.com/ja/tutorials/file/dndfiles/

【DataTransfer - Web APIs | MDN】
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

【FileReader - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/FileReader

Comments

[akadashi]

ご提示いただいた資料をよく読み、以下のように修正したところ成功しました。ありがとうございました。

function f2(event)
{
event.preventDefault();
var f = event.dataTransfer;
var str = f.getData("text");

var reader = new FileReader();
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
console.log(evt.target.result);
}
};

reader.readAsText(f.files[0]);

}