spreadsheets-file-reader

async function accepts a FileList (event.target.files) and returns ready-to-code javascript objects

• Written with Typescript
• Supports .csv .xls .xlsx .xlsb .ods
• Dependable Dependencies: xlsx d3-dsv

Install

npm install spreadsheets-reader

Snippet

async function onChangeHandler(event) {
  let filelist = event.target.files;
  let spreadsheeets = await SpreadSheetsFileReader(
    filelist,
    ["NA", "N/A"], //values converted to empty string, defaults shown
    "#" //ignore rows starting with string, default shown
  );
  const firstFile = spreadsheeets[0];
  const firstSheet = firstFile[0];
  const { filename, sheetname, data } = firstSheet;
}

Typescript React Example

import { SpreadSheetsFileReader } from "spreadsheets-reader";
import { ChangeEvent, useState } from "react";
import { FolderType } from "spreadsheets-reader/dist/tsc/types";

function App() {
  const [spreadsheets, setSpreadsheets] = useState<FolderType>([]);

  async function handleUpload(e: ChangeEvent<HTMLInputElement>) {
    const target = e.target;
    if (!target.files?.length) return;
    let filelist: FileList = target.files;
    let spreadsheeets = await SpreadSheetsFileReader(filelist);
    setSpreadsheets(spreadsheeets);
  }

  return (
    <div>
      <input
        type="file"
        multiple
        onChange={handleUpload}
        accept=".csv, .xlsx, .xlsb, .xls, .ods"
      ></input>
      {spreadsheets.length && (
        <pre>{JSON.stringify(spreadsheets, null, 2)}</pre>
      )}
    </div>
  );
}

export default App;

spreadsheets output

data attribute is d3-dsv's type DSVRowArray<String>

myFile.xlsx with two sheets

[
  [
    {
      "filename": "myFile.xlsx"
      "sheetname": "Sheet1",
      "data": [
        {
          "col1": "10",
          "col2": "a",
          "col3": "d",
        },
        {
          "col1": "20",
          "col2": "b",
          "col3": "e",
        },
      ],
    },
    {
      "filename": "myFile.xlsx"
      "sheetname": "Sheet2",
      "data": [
        {
          "colA": "1",
          "colB": "a",
          "colC": "d",
          "colD": "g"
        },
        {
          "colA": "2",
          "colB": "b",
          "colC": "e",
          "colD": "h"
        },
      ],
    }
  ]
]