Upload files and show them in web page using React

Question

I am trying upload txt files using React, and show these files or the names of the files front of the user, to give him permission to change the file or to delete it. This is my :

 import React from "react";

class Browse extends React.Component
{

state =  {selectedFile:[] , textFile: []};

//fileChangedHandler  Method
fileChangedHandler =event => {        
 for(var i=0;i<event.target.files.length;i++){         
       this.state.fileees =event.target.files;
       this.setState({selectedFile: event.target.files[i]})

    this.setState((state) => {
        const textFile=[...state.textFile,state.selectedFile.name];
        return {
          textFile,
        };
    });

  }  //for
  } //fileChangedHandler

 render(){
    return(
        <div className="Browse">
                <label for="myfile">Insert DNA Files:</label>
                <input type="file" onChange={this.fileChangedHandler} id="myfile" name="myfile" multiple/>                  
                <div>
                  {this.state.selectedFile.name}
                </div>
        </div>
    );
}

} //class


export default Browse;

Its works very good if I upload one file, I can see the file name, but Its not work if I upload multiple files. I need the help for the problem, why if I upload more than one file, I can't show them in the web front of the user

Thank you .

Answer 1

Hi Please check this example. Here I uploaded multiple files and shown file names in the page.

import React from "react";

export default class FIleUploadExample extends React.Component {

    state = {
        files: []
    };

    fileUpload = (e) => {
        this.setState({files: [...e.target.files]});
    };

    render() {
        return (
            <div>
                <span>File Upload</span>
                <input type="file" multiple="multiple" id="file" onChange={this.fileUpload}/>
                <ul>
                    {
                        this.state.files.map((file, i) => <li key={i}>{file.name}</li>)
                    }
                </ul>
            </div>
        );
    }
}