react-file-reader-input
React file input component for complete control over styling and abstraction from file reading.
<FileReaderInput as={dataFormat} onChange={handler} {...props}/>
- as (string): what format the FileReader should read the
file as (i.e.,
buffer
,binary
,url
,text
). Defaults tourl
. - children (element): if children is passed into
FileReaderInput, then the component will hide the native file input and
instead display
children
. Whenever the customchildren
are clicked, the component will trigger the native file input prompt. This allows complete control over styling an display. - onChange (function): callback
function(event, results)
. Results will be an array of arrays, the size of which depending on how many files were selected. Each result will be an array of two items:- progressEvent:
result[0]
is a ProgressEvent object. You can retrieve the raw results atprogressEvent.target.result
among other things. - file:
result[1]
is a File object. You can retrieve the file name atfile.name
among other things.
- progressEvent:
All other props on FileReaderInput
will be passed down to the native file
input.
Usage
;; Component { results; } { return <form> <label htmlFor="my-file-input">Upload a File:</label> <FileReaderInput as="binary" id="my-file-input" onChange=thishandleChange> <button>Select a file!</button> </FileReaderInput> </form> ; }