react-file-reader

    1.1.4 • Public • Published

    React File Reader

    Build Status DAVID

    NPM

    LIVE DEMO

    A flexible ReactJS component for handling styled HTML file inputs.

    Install

    npm install react-file-reader --save
    

    ChangeLog

    • 1.1.4
      • adds disabled prop for input
    • 1.1.3
      • adds the ability to accept multiple fileTypes as an array
    • 1.1.2
      • fixes an issue where the same file couldn't be selected twice in a row
    • 1.1.1
      • changes the way we're hiding the input, as previously it would break parent elements that were positioned absolutely.
    • 1.1.0
      • adds the ability to return both base64 strings and an HTML5 FileList from handleFiles
    • 1.0.3
      • bumps React version to 15.5 and fixes UNMET peer dependency with webpack
    • 1.0.2
      • fixed an issue w/ prop-types not being available
    • 1.0.1
      • fixed issue w/ uuid4 being a devDependency
    • 1.0.0
      • initial release

    Props

    Default Props

    • fileTypes: 'image/*'
    • multipleFiles: false
    • base64: false

    Required Props

    • a child element/component
      • pass in your customized element to represent your upload input
    • handleFiles
      • a function to handle the selected files from the HTML input

    Optional Props

    • elementId
      • set a unique element Id for the input element
      • if this is not set, a random UUID is generated for each input on the page.
    • base64
      • a boolean to convert and return the files as a base64 string
      • multipleFile selection will return an array of base64 strings
    • multipleFiles
      • a boolean enforce single file or multiple file selection
    • fileTypes
    • disabled
      • disable input

    Usage

    Import React File Reader

    import ReactFileReader from 'react-file-reader';

    Basic Use

    handleFiles = files => {
      console.log(files)
    }
     
    <ReactFileReader handleFiles={this.handleFiles}>
      <button className='btn'>Upload</button>
    </ReactFileReader>

    Response

    HTML5 FileList

    Base64

    When base64 is true, React File Reader returns a JS Object including both the base64 files and the HTML5 FileList. You can access their values at Object.base64 or Object.fileList

    handleFiles = (files) => {
      console.log(files.base64)
    }
     
    <ReactFileReader fileTypes={[".csv",".zip"]} base64={true} multipleFiles={true} handleFiles={this.handleFiles}>
      <button className='btn'>Upload</button>
    </ReactFileReader>

    Response

    multipleFiles={true}
    ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA", "data:image/png;base64,i..."]
    
    multipleFiles={false}
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."
    
    Access HTML5 FileList with base64={true}
    handleFiles = (files) => {
      console.log(files.fileList)
    }
    

    Copyright

    Copyright (c)2017 Grillwork Inc. See LICENSE for details.

    Keywords

    none

    Install

    npm i react-file-reader

    DownloadsWeekly Downloads

    7,733

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    19.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • travisdmathis