react-file-reader-input
React file input component for complete control over styling and abstraction
from file reading.\
- as (string): what format the FileReader should read the
buffer
`,
`binary
`,
`url
`,
`text
``). Defaults
to ``url
``.- children (element): if children is passed into
children
`. Whenever the custom
`children
`` 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)
``.
- *progressEvent*: ```result[0]``` is a
[ProgressEvent](https://developer.mozilla.org/docs/Web/API/ProgressEvent)
object. You can retrieve the raw results at
```progressEvent.target.result``` among other things.
- *file*: ```result[1]``` is a
[File](https://developer.mozilla.org/docs/Web/API/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.Usage
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>
);
}
}