A flexible ReactJS component for handling styled HTML file inputs.
npm install react-file-reader
A flexible ReactJS component for handling styled HTML file inputs.
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 releaseProps
$3
- fileTypes: 'image/\*'
- multipleFiles: false
- base64: false$3
- 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$3
- elementId
- set a 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 of base64 strings
- multipleFiles
- a 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 inputUsage
$3
`javascript
import ReactFileReader from 'react-file-reader';
`$3
javascript
handleFiles = files => {
console.log(files)
}
`#### Response
HTML5 FileList
$3
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.fileListjavascript
handleFiles = (files) => {
console.log(files.base64)
}
`#### 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)
}