how to hold file input value in react

Question

suppose a page contains multi-stage form, in 1st stage of form contains input field for name and in second stage it contains input for file , onChange sets state values for name and file,but when we move back and forth like 1st stage to 2nd stage and sencond stage, we can hold value for input type name but how to hold value for input type file.

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageone: true,
      pagetwo: false,
      pagethree: false,
      pageonedata: "",
      pagetwodata: "",
      pagethreedata: ""
    };
    this.nextPage = this.nextPage.bind(this);
    this.prevPage = this.prevPage.bind(this);
    this.togglePage = this.togglePage.bind(this);
  }

  prevPage() {
    if (this.state.pagetwo === true) {
      this.setState({
        pageone: !this.state.pageone,
        pagetwo: !this.state.pagetwo
      });
    } else if (this.state.pagethree === true) {
      this.setState({
        pagethree: !this.state.pagethree,
        pagetwo: !this.state.pagetwo
      });
    }
  }

  nextPage() {
    if (this.state.pageone === true) {
      this.setState({
        pageone: !this.state.pageone,
        pagetwo: !this.state.pagetwo
      });
    } else if (this.state.pagetwo === true) {
      this.setState({
        pagetwo: !this.state.pagetwo,
        pagethree: !this.state.three
      });
    }
  }

  togglePage() {
    this.setState({
      pageone: !this.state.pageone,
      pagetwo: !this.state.pagetwo
    });
  }

  handleChange = e => {
    this.setState({ ...this.state, [e.target.name]: e.target.value });
  };

  handleChange = e => {
    this.setState({ ...this.state, [e.target.name]: e.target.files[0] });
  };

  render() {
    return (
      <div style={{ margin: "250px 500px" }}>
        {this.state.pageone && (
          <form>
            <label>
              <h4>page one</h4>
            </label>
            <input
              type="text"
              name="pageonedata"
              value={this.state.pageonedata}
              onChange={this.handleChange}
            />
          </form>
        )}
        {this.state.pagetwo && (
          <form>
            <label>
              <h4>page two</h4>
            </label>
            <input
              type="file"
              name="pagetwodata"
              value={this.state.pagetwodata}
              onChange={this.handleFile}
            />
          </form>
        )}
        {this.state.pagethree && (
          <form>
            <label>
              <h4>page three</h4>
            </label>
            <input
              type="text"
              name="pagethreedata"
              value={this.state.pagethreedata}
              onChange={this.handleChange}
            />
          </form>
        )}
        <br />
        <button
          type="submit"
          onClick={this.prevPage}
          disabled={this.state.pageone ? true : false}
        >
          previous
        </button>{" "}
        <button
          type="submit"
          onClick={this.nextPage}
          disabled={this.state.pagethree ? true : false}
        >
          next
        </button>{" "}
        <button
          type="submit"
          onClick={this.togglePage}
          disabled={this.state.pagethree ? false : true}
        >
          finish
        </button>
      </div>
    );
  }
}

export default App;

Answer 1

You can't insert a file into an input element programmatically, only the user can do that, so the best way to keep the file in the input would be to set display:none; conditionally on the form instead of removing it from the DOM.

Example

class App extends Component {
  // ...

  handleFile = e => {
    this.setState({ ...this.state, [e.target.name]: e.target.files[0] });
  };

  render() {
    return (
      {/* ... */}
        <form style={{ display: this.state.pagetwo ? 'block' : 'none' }}>
          <label>
            <h4>page two</h4>
          </label>
          <input
            type="file"
            name="pagetwodata"
            value={this.state.pagetwodata}
            onChange={this.handleFile}
          />
        </form>
      {/* ... */}
    );
  }
}