Napoleonic Political Magnificence

    mui-dropzone
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    mui-dropzone

    a File Drop Zone component that uses Material-UI components for style. Also includes Excel and File helper functions.

    NPM JavaScript Style Guide

    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 dropzone
    • dragOverMessage: set the message displayed when a file is dragged over the dropzone
    • acceptedExtensions: similar to acceptedMimeTypes, but looks at file extension. not mutually exclusive with acceptedMimeTypes.
    • 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

    Install

    npm i mui-dropzone

    DownloadsWeekly Downloads

    6

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    15

    Last publish

    Collaborators

    • curtisrutland