Change the file after uploading in React JS (Reupload files)

Question

Here my code to upload multi files in React JS and show these files front of the user. .I have two buttons near of the name of the files: first button name:"Delete" when the user click it all the row disappear,and that works fine. second button name: "Change" when the user click it he can upload another file, and the new file 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: []
  };

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

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

  Delete(name) {
    this.setState((prevState) => ({
      files: prevState.files.filter((file) => file.name !== name)
    }));
    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}>
              - <th style={{ textAlign: 'left' }}>{file.name} : </th>
              <th>
                <button type='file' onClick={() => this.Change(i)}>
                  Change
                </button>
              </th>
              <th>
                <button onClick={() => this.Delete(file.name)}>Delete</button>
              </th>
            </tr>
          ))}
        </table>
      </div>
    );
  }
}

Answer 1

Please check this example:

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

export default class Browse extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            files: [],
            changedFileIndex: -1
        };
        this.fileUploaderRef = React.createRef();
    }

    fileUpload = (e) => {
        let changedFile = e.target.files[0];
        let uploadedFiles = e.target.files;

        if (this.state.changedFileIndex >= 0) {
            this.setState(prevState => {
                const list = [];
                prevState.files.map((file, i) => {
                    if (i === prevState.changedFileIndex)
                        list.push(changedFile);
                    else
                        list.push(file);
                });
                return {
                    files: list,
                    changedFileIndex: -1,
                };
            });
        } else if (this.state.files.length > 0) {
            this.setState(prevState => {
                return {files: [...prevState.files, ...uploadedFiles]}
            });
        } else
            this.setState({files: [...e.target.files]});
    };

    Change(index, file) {
        console.log("Change Function");
        this.setState({changedFileIndex: index});
        this.fileUploaderRef.current.click();
    }

    Delete(name) {
        this.setState(prevState => {
            const list = [];
            prevState.files.map((file, i) => {
                if (file.name !== name) {
                    list.push(file);
                }
            });
            return {
                files: list,
                changedFileIndex: -1,
            };
        });
    }

    render() {
        return (
            <div className="Browse">
                <label>Insert DNA Files:</label>
                <input type="file" multiple="multiple" id="file" ref={this.fileUploaderRef} onChange={this.fileUpload}/>
                <table className="filesName">
                    <tbody>
                    {
                        this.state.files.map((file, i) =>
                            <tr key={i}>
                                <th style={{textAlign: "left"}}>{file.name} :</th>
                                <th>
                                    <button type="file" onClick={() => this.Change(i)}>Change</button>
                                </th>
                                <th>
                                    <button onClick={() => this.Delete(file.name)}>Delete</button>
                                </th>
                            </tr>
                        )
                    }
                    </tbody>
                </table>
            </div>
        );
    }
}