【Javascript】ドラッグ＆ドロップでCSVを読み込む

2021年8月16日にメンテナンス済み

ドラッグ＆ドロップのイベントを登録する

まず、ファイルをドラッグ＆ドロップできる領域を設定します。

今回はやっていませんが、対象領域上にファイルがドラッグされている時とそうでない時で、領域のスタイルを変更する方がユーザフレンドリーです。

// ドラッグ&ドロップを許可する領域を取得
const dropArea = document.body;

// 対象領域にファイルがドラッグされた際のイベントを登録
dropArea.addEventListener("dragover", (event) => {
  //ドラッグされたファイルを、ブラウザが開かないように設定
  event.preventDefault();

  // ドラッグしているファイルの表示を変更
  event.dataTransfer.dropEffect = "copy";
});

// 対象領域外へファイルがドラッグされた際のイベントを登録
dropArea.addEventListener("dragleave", (event) => {
  // 今回は何もしない
});

// 対象領域にファイルがドロップされた際のイベントを登録
dropArea.addEventListener("drop", (event) => {
  //ドラッグされたファイルを、ブラウザが開かないように設定
  event.preventDefault();

  var files = event.dataTransfer.files;
  getFiles(files);
});

ドロップされたCSVデータを、2次元配列に変換する

const getFiles = (files) => {
  for (const file of files) {
    const reader = new FileReader();

    //テキスト形式で読み込む
    reader.readAsText(file);

    // テキストの読み込みが完了した際のイベントを登録
    reader.onload = (event) => {
      const text = event.target.result;

      const csv = text.split("\n").map((row) => row.split(","));

      console.log(csv);
    };
  }
};