Ribbit.work

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

JavaScript

last modified date2021-8-16

publish date2021-8-15

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

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

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

// ドラッグ&ドロップを許可する領域を取得
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);
    };
  }
};

この記事をシェア

この記事を読んだ方におすすめの記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript

最新の記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript