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