react-file-reader

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

- React File Reader supports all HTML input accept attributes. - Can be passed as a string or an array

• 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.