Build Status DAVID

NPM

LIVE DEMO

A flexible ReactJS component for handling styled HTML file inputs.

npm install react-file-reader --save

• 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

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

• 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

• 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
  • React File Reader supports all HTML input accept attributes.
  • Can be passed as a string or an array
• disabled
  • disable input

import ReactFileReader from 'react-file-reader';

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

HTML5 FileList

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>

["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA", "data:image/png;base64,i..."]

 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."

handleFiles = (files) => {
 console.log(files.fileList)
}

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