How can we upload multiple files using React.JS ? When we click on the upload button all the names of the selected files must appear

Question

onFileChange = (event) => {
    if (event.target.files) {
      console.log(Array.from(event.target.files) , "file");
      this.setState({
        selectedFile: Array.from(event.target.files),
        selectedFileName: Array.from(event.target.files[0].name),
      });
      
    }
    document.getElementById("fileUpload").classList.remove("fileUpload");
  };

 

<label for="fileUpload"  onChange={this.onFileChange} multiple>
                              
                          
                            <input id="fileUpload" style={{visibility:"hidden"}} 
                              type={"file"}   
                             />
                            </label>

On click of the label we need to upload the multiple files and the file names should also be displayed in UI.Here is my code.

Answer 1

 handleFile = (e) =>{
    let images = e.target.files;
    var i;
    for( i=0;i<e.target.files.length;i++){
      this.state.targetFile.push(images[i].name );
     }
     this.setState({
    selectedFile:this.state.targetFile

  })
};

This has worked for me