spreadsheets-dropzone

React drag-and-drop component that reads spreadsheet file(s) and outputs structured arrays of spreadsheets.

Install

npm install spreadsheets-dropzone

Usage Typescript

import { SpreadsheetsDropZone } from "spreadsheets-dropzone";
import { FolderType } from "spreadsheets-reader/dist/tsc/types";
import {
  uploadMessage,
  hoverTip,
  colors,
  emptyZoneStyle,
  loadedZoneStyle,
  parentFontSize,
} from "./defaultsForOptionalProps";

function App() {
  const handleData = (data: FolderType) => {
    console.dir(data);
  };

  return (
    <SpreadsheetsDropZone
      handleSpreadsheetsData={handleData} //required
      uploadMessage={uploadMessage}
      hoverTip={hoverTip}
      parentFontSize={parentFontSize}
      colors={colors}
      yesFilesStyle={loadedZoneStyle}
      noFilesStyle={emptyZoneStyle}
    />
  );
}

export default App;

defaultsForOptionalProps.js

optional props are show below containing their default values

export const uploadMessage = "Add Spreadsheet Files Here";
export const hoverTip = "Drag-drop or Click to upload Excel or CSV File(s).";
export const parentFontSize = "14px";

export const colors = {
  blue: "rgb(214, 241, 255)",
  red: "rgb(247, 160, 114)",
  white: "rgb(249, 247, 243)",
  lightGrey: "rgb(226, 224, 221)",
  mediumGrey: "rgb(130, 128, 126)",
  darkGrey: "rgb(67, 66, 65)",
  black: "rgb(31,30,29)",
};

export const emptyZoneStyle = {
  backgroundColor: colors["white"],
  opacity: "100",
  border: `1px dashed ${colors.darkGrey}`,
  borderRadius: "4%",
};

export const loadedZoneStyle = {
  backgroundColor: colors["blue"],
  opacity: "100",
  border: `1px dashed ${colors.darkGrey}`,
  borderRadius: "5px",
};

The structured output is an array that contains one for each file uploaded. Each file is an array of 'sheet' objects with filename, sheetname and data attribues.

Compatible with many spreadsheet filetypes

.xlsx .xls .xlsb .csv .ods

output

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"
        },
      ],
    }
  ]
]

data attribute is d3-dsv's type DSVRowArray