JSで外部CSVをドラッグ&ドロップして中身をいじるロジック

どうも。

自分の練習用&ライブラリ増強のために掲題のJSを書いてみました。

JSでファイル読み込みなんてしないな〜と思いつつも、あったらいつか便利な時が来るかも！なんて気持ちもあったので作ってみました。

ここではドラッグ&ドロップでファイル読み込みします。

$(function() {
  $("#drag_area").on("drop", function(e) {
    $(this).hide();
    e.preventDefault();

    var files = e.originalEvent.dataTransfer.files;

    var reader = new FileReader();
    var result = "";
    var f;
    for (var i = 0;f = files[i];i++) {
      reader.onloadend = function() {
        var body = reader.result.split('data:application/vmd.ms-excel;base64,')[1];
        var stringArray = window.atob(body).split('¥n');
        for(var j = 0;j < stringArray.length;j++) {
          result += stringArray[j].split(',');
        }
        console.log(result);
      }
      reader.readAsDataURL(f);
    }
  }).on("dragenter", function() {
    return false;
  }).on("dragover", function() {
    return false;
  });
})();

ファイルの中身についてはバイナリでは、そのままでは文字列として利用できません。デバッグすればわかりますが、頭に余計な文字列がついてるのが原因。reader.onloadendの中でその対策をします。

読み込んだbody = の行にあるdata:application/vmd.ms-excel;base64,は、CSVがexcelで開く形式なのでそうなっています。テキスト形式なら、また別の文字列が入ってます。これが頭についてるのでそのままではdecodeできません。なのでsplitで取り除いた結果をwindow.atobでdecodeします。

今回はconsole.logで結果を出力しているにすぎませんが、これを応用したら、何か作れるのではないか？

JSは本当に無限の可能性を持っている言語だな〜とつくづく思いますね。

あ、今回はHTMLはボタンを表示するだけなのであえて書きません。

ここに書いてるのと全く同じのを使います。

notwodaily.hatenablog.com

DB保存もlocalStrageもsessionも使わずにデータ保持する手段になりそう。

今回はこの辺で。