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

ドラッグ&ドロップのイベントを登録する
まず、ファイルをドラッグ&ドロップできる領域を設定します。
今回はやっていませんが、対象領域上にファイルがドラッグされている時とそうでない時で、領域のスタイルを変更する方がユーザフレンドリーです。
// ドラッグ&ドロップを許可する領域を取得
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);
};
}
};