Skip to content
This repository has been archived by the owner on Oct 8, 2018. It is now read-only.

Flexible ReactJS component for handling styled HTML file inputs

License

Notifications You must be signed in to change notification settings

travisdmathis/react-file-reader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

THIS LIBRARY HAS BEEN DEPRECATED - IF YOU WOULD LIKE TO MOVE THE PROJECT FORWARD FORK IT AND CARRY ON! I just don't have time to maintain without any help, as I no longer run this business as a full time job.

THIS REPO IS NO LONGER MAINTAINED AND IS HERE ONLY FOR PRESERVATION AND PORTFOLIO PURPOSES

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.