Skip to content

Commit edb8e0c

Browse files
authored
accepting file object
file blob no longer required to be passed as param, just pass the file object from the onChange event handler
1 parent 9048dc4 commit edb8e0c

File tree

1 file changed

+21
-14
lines changed

1 file changed

+21
-14
lines changed

README.md

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,29 @@ npm install react-excel-renderer --save
1515
```
1616
import {OutTable, ExcelRenderer} from 'react-excel-renderer';
1717
```
18-
* Provide binary object (blob) of the excel file to be rendered, to the *ExcelRenderer* function to obtain JSON data from sheet
18+
* Place a simple `input` element in the render function of your class and pass an `onChange` handler
1919
```
20-
//let blob be the binary data of the file
21-
ExcelRenderer(blob, (err, resp) => {
22-
//handle fail case here
23-
if(err){
24-
console.log(err);
25-
}
26-
//handle success case here
27-
else{
28-
this.setState({
29-
cols: resp.cols, //state variable containing columns
30-
rows: resp.rows //state variable containing all rows obtained from sheet
31-
});
20+
<input type="file" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}} />
21+
```
22+
* In the `onChange` handler, invoke the `ExcelRenderer` function and provide file object from the event handler to the `ExcelRenderer` function to obtain JSON data from sheet
23+
```
24+
fileHandler = (event) => {
25+
let fileObj = event.target.files[0];
26+
27+
//just pass the fileObj as parameter
28+
ExcelRenderer(fileObj, (err, resp) => {
29+
if(err){
30+
console.log(err);
31+
}
32+
else{
33+
this.setState({
34+
cols: resp.cols,
35+
rows: resp.rows
36+
});
37+
}
38+
});
39+
3240
}
33-
});
3441
```
3542
* Use the OutTable component to render obtained JSON data into HTML table, and provide classnames as props to make table look alike an Excel Sheet
3643
```

0 commit comments

Comments
 (0)