1.0.4 • Published 5 years ago
mui-dropzone v1.0.4
mui-dropzone
a File Drop Zone component that uses Material-UI components for style. Also includes Excel and File helper functions.
Install
npm install --save mui-dropzone @material-ui/core xlsx
#or
yarn add mui-dropzone @material-ui/core xlsx
Usage
FileDropZone
import * as React from 'react'
import { FileDropZone } from 'mui-dropzone';
class Example extends React.Component {
onFilesAdded = (files) => {
console.log("files added!", files);
}
onFilesRejected = (files) => {
console.log("files rejected!", files);
}
render () {
return (
<FileDropZone
acceptedMimeTypes={excel.excelMimeTypes}
onFilesAdded={this.onFilesAdded}
onFilesRejected={this.onFilesRejected}
elevation={2}
dragOverElevation={10} />
)
}
}
Other Properties:
message
: set the message displayed in the dropzonedragOverMessage
: set the message displayed when a file is dragged over the dropzoneacceptedExtensions
: similar toacceptedMimeTypes
, but looks at file extension. not mutually exclusive withacceptedMimeTypes
.blockOtherDrops
: disallows any file drop events on the page anywhere but the dropzone. Useful to prevent users from dropping files in the wrong area.dragOverClassName
: set the classname when a file is dragged over the dropzone. This will replace the className property
excel
a module with excel file helpers.
import { excel } from 'mui-dropzone';
//get file from FileDropZone onFilesAdded event
let data = await excel.parseExcel(file);
//data will be a dictionary with a key per worksheet in the workbook. First row of each will be treated as column headers
files
a module with javascript file helpers.
import { files } from 'mui-dropzone';
let buff = await files.loadFileAsArrayBuffer(file);
let text = await files.loadFileAsText(file);
License
MIT © curtisrutland
Details
Bootstrapped with Create-React-Library