title: how to hold file input value in react
body: <p>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.</p>
  
  <pre><code>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 =&gt; {
      this.setState({ ...this.state, [e.target.name]: e.target.value });
    };
  
    handleChange = e =&gt; {
      this.setState({ ...this.state, [e.target.name]: e.target.files[0] });
    };
  
    render() {
      return (
        &lt;div style={{ margin: "250px 500px" }}&gt;
          {this.state.pageone &amp;&amp; (
            &lt;form&gt;
              &lt;label&gt;
                &lt;h4&gt;page one&lt;/h4&gt;
              &lt;/label&gt;
              &lt;input
                type="text"
                name="pageonedata"
                value={this.state.pageonedata}
                onChange={this.handleChange}
              /&gt;
            &lt;/form&gt;
          )}
          {this.state.pagetwo &amp;&amp; (
            &lt;form&gt;
              &lt;label&gt;
                &lt;h4&gt;page two&lt;/h4&gt;
              &lt;/label&gt;
              &lt;input
                type="file"
                name="pagetwodata"
                value={this.state.pagetwodata}
                onChange={this.handleFile}
              /&gt;
            &lt;/form&gt;
          )}
          {this.state.pagethree &amp;&amp; (
            &lt;form&gt;
              &lt;label&gt;
                &lt;h4&gt;page three&lt;/h4&gt;
              &lt;/label&gt;
              &lt;input
                type="text"
                name="pagethreedata"
                value={this.state.pagethreedata}
                onChange={this.handleChange}
              /&gt;
            &lt;/form&gt;
          )}
          &lt;br /&gt;
          &lt;button
            type="submit"
            onClick={this.prevPage}
            disabled={this.state.pageone ? true : false}
          &gt;
            previous
          &lt;/button&gt;{" "}
          &lt;button
            type="submit"
            onClick={this.nextPage}
            disabled={this.state.pagethree ? true : false}
          &gt;
            next
          &lt;/button&gt;{" "}
          &lt;button
            type="submit"
            onClick={this.togglePage}
            disabled={this.state.pagethree ? false : true}
          &gt;
            finish
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>