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 customchildrenare 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.resultamong other things. - file:
result[1]is a File object. You can retrieve the file name atfile.nameamong other things.
- progressEvent:
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>
);
}
}
![[Enhancement] add an option to pass a custom css class](https://avatars.githubusercontent.com/u/5343874?v=4)
2 Feb 10, 2022
1 Aug 22, 2022
436 Dec 31, 2022
1 May 6, 2022
2.1k Dec 27, 2022
307 Jan 2, 2023
0 Mar 1, 2022
21 Jul 13, 2022
36 Dec 15, 2022
5 Feb 15, 2022
1 Dec 24, 2021
5 Dec 4, 2022
1 Mar 31, 2022
3.4k Jan 6, 2023
4 Feb 17, 2021
8 Nov 1, 2022
3 Dec 9, 2021
2 Jun 25, 2022
3.1k Jan 2, 2023