Read multiple files using filereader in react js

Question

I tried to upload Multiple files and wants to read the content of the file for encrypt the data. I can able to read the single file properly , but I can't do it while upload multiple files am getting error reader is busy. If I create new Filereader while onloadend it gives me null value of content.

React JS - sample code:

let reader = new FileReader();
class FilReaderComp extends Component {
constructor(props) {
super(props);
this.state = {

}}
upLoadFileFolderFunc(e){
e.preventDefault();
let fileitemsList = e.target.files;
for (let i = 0; i < fileitemsList.length; i++) {
  let fileitems = fileitemsList[i];
  reader.onloadend = this.handleFileRead;
  reader.readAsText(fileitems);
  }
}

handleFileRead = (e) => {
const content = reader.result; here am reading content of the file

//here doing my function after getting content
}
render(){
return(
<input  type="file" className="custom-file-input" style={{display:"hide"}}
            onChange={this.upLoadFileFolderFunc} multiple/>
);}

export default withRouter(FilReaderComp);

Rush W. · Accepted Answer · 2021-07-21 16:58:25Z

2

Try wrapping your onload function in another function and enclose the filereader in the loop. Here the closure gives you access to each file being processed in turn via the variable f:

function openFiles(evt){
    var files = evt.target.files;

    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];

        var reader = new FileReader();

        reader.onload = (function(f) {
            return function(e) {
                // Here you can use `e.target.result` or `this.result`
                // and `f.name`.
            };
        })(file);

        reader.readAsText(file);
    }
}

answered Jul 21, 2021 at 16:58

Rush W.

1,3712 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Read multiple files using filereader in react js

React JS - sample code:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

React JS - sample code:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related