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

I need to add two buttons near of the name of the files : first button name:"Delete" when the user click it all the row disappear. second button name: "Change" when the user click it he can upload another file, and the new file name must replace the old . How can I do that ?

import React from "react";
import '../index.css';
import './dna.css';



export default class Browse extends React.Component {

    state = {
        files: [],
       // changeButtons:[],
    //    deleteButtons:[]
    };

    fileUpload = (e) => {
        this.setState({files: [...e.target.files]});
       // this.setState({changeButtons:[<button>Change</button>]});
       // this.setState({deleteButtons:[<button onClick={(e)=>this.onDelete(id)}>Delete</button>]});
    };

        Change(id){
            console.log("Change Function");
        }

    Delete(id) {
        console.log("ssss")
        this.setState((prevState) => ({
          files: prevState.files.filter(files => files.id !== id),
        }))
        console.log(this.state.files.name);
      }

    render() {
        return (
            <div className="Browse">
               <label>Insert DNA Files:</label>
                <input type="file" multiple="multiple" id="file" onChange={this.fileUpload}/>
                <table className="filesName">

                    {

                        this.state.files.map((file, i) => <tr key={i}>
                                                            <td style={{textAlign:"left"}}>{file.name} : </td>
                                                            <td><button onClick={() => this.Change(i)}>Change</button></td>
                                                            <td><button onClick={() => this.Delete(i)}>Delete</button></td>
                                                          </tr>)
                    }

                </table>
            </div>
        );
    }
}

Answer 2

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>
        );
    }
}