React file input component for complete control over styling and abstraction from file reading.
<FileReaderInput as={dataFormat} onChange={handler} {...props}/>buffer
, binary
, url
, text
). Defaults to url
.children
. Whenever the custom children
are clicked, the component will trigger the native file input prompt. This allows complete control over styling an display.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:
result[0]
is a ProgressEvent object. You can retrieve the raw results at progressEvent.target.result
among other things.result[1]
is a File object. You can retrieve the file name at file.name
among other things.All other props on FileReaderInput
will be passed down to the native file input.
import React from 'react'; import FileReaderInput from 'react-file-reader-input'; class MyComponent extends React.Component { handleChange = (e, results) => { results.forEach(result => { const [e, file] = result; this.props.dispatch(uploadFile(e.target.result)); console.log(`Successfully uploaded ${file.name}!`); }); } render() { return ( <form> <label htmlFor="my-file-input">Upload a File:</label> <FileReaderInput as="binary" id="my-file-input" onChange={this.handleChange}> <button>Select a file!</button> </FileReaderInput> </form> ); } }
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4