ReactでCSVをアップロードしてFirestoreに保存する

ReactでCSVをアップロードしてFirestoreに一括で保存する機能を作りました。

事前準備

CSVのアップロード、取り込みにはreact-dropzonereact-papaparseを使いました。

react-dorpzoneはファイルをドラッグ&ドロップもしくはファイル選択ダイアログで選択するためのライブラリ、react-papaparseはCSVをJSON、JSONをCSVに変換するためのライブラリになります。

ライブラリのインストール

下記コマンドで使用するライブラリをインストールします。

react-dorpzone

npm install –save react-dropzone
OR
yarn add react-dropzone

react-papaparse

npm install –save react-papaparse
OR
yarn add react-papaparse

実装方法

下記のようなCSVをFirestoreのusersコレクションのname、country、ageフィールドにそれぞれ保存します。

田中太郎,東京,30
山田花子,神奈川,25
佐藤二郎,埼玉,28

実際のソースは下記のようになります。

「firebaseConfig」の部分は自分の環境に置き換えてください。

import { render } from '@testing-library/react';
import { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { readString } from 'react-papaparse';
import { initializeApp, getApps } from "firebase/app";
import { collection, addDoc, getFirestore } from "firebase/firestore";


const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
};

if (!getApps().length) {
  const app = initializeApp(firebaseConfig);
}

const db = getFirestore();

function App() {
  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()

      reader.onabort = () => console.log('file reading was aborted');
      reader.onerror = () => console.log('file reading has failed');
      reader.onload = () => {
        const binaryStr = reader.result;

        readString(binaryStr, {
          worker: true,
          complete: (results) => {
            results.data.map((row) => {
              addDoc(collection(db, "users"), {
                name: row[0],
                country: row[1],
                age: row[2]
              });
            });
          }
        });
      }
      reader.readAsText(file)
    });

  }, []);

  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});

  return (
    <div className="App">
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        {
          isDragActive ?
            <p>Drop the files here ...</p> :
            <p>Drag 'n' drop some files here, or click to select files</p>
          }
        </div>
      </div>
    );
}

export default App;

「Drag ‘n’ drop some files here, or click to select files」と書かれている箇所にファイルをドラッグ&ドロップもしくはクリックしてCSVファイルを選択すると、onDropのコールバックが呼び出されます。

reader.readAsTextでアップロードしたファイルを文字列として読み取り、readStringでJSONに変換します。

completeは変換が完了したあとに実行するコールバックを指定できるので、変換結果をmapでループさせてFirestoreに保存しています。

実際にはアップロードされたファイルの拡張子のチェックやCSVの形式が必要ですが、最小限のソースで取り込むならこんな感じかなと思います。

 

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです!
にほんブログ村 IT技術ブログへ
にほんブログ村