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;

your question is about how to hold values from `input` of `type file`? — Revansiddh, Jul 19 '18 at 12:11
yes when we move back and forth of stages i want to hold file input value — Srikanth Gowda, Jul 19 '18 at 12:13

score 22 · Accepted Answer · answered Jul 19 '18 at 12:36

22

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>
      {/* ... */}
    );
  }
}

answered Jul 19 '18 at 12:36

Tholle

108,070
19
198
189

1

thanks man got the point,i thought we can hold file input value programatically. – Srikanth Gowda Jul 19 '18 at 12:48
1

@SrikanthGowda You're welcome! Yeah, it's quite tricky. You can hold the file in state, but it will not be part of the new input element if you remove it and add a new one. – Tholle Jul 19 '18 at 12:48
1

Thank you,it worked. you catch the point perfectly.best answer – Srikanth Gowda Jul 19 '18 at 13:11

score 1 · Answer 2 · answered Jan 24 '23 at 22:00

1

You can now update the input files value using something like this example:

const fileInput = document.querySelector(`#your-input-file-id`);
    
const myFile = new File(['Hello World!'], 'myFile.txt', {
   type: 'text/plain',
   lastModified: new Date(),
});

const dataTransfer = new DataTransfer();
dataTransfer.items.add(myFile);
fileInput.files = dataTransfer.files;

answered Jan 24 '23 at 22:00

Miguel Carrero

11
1

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData – ptim Mar 29 '23 at 04:05

how to hold file input value in react

2 Answers2

Linked