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
– Revansiddh, Commented Jul 19, 2018 at 12:11
yes when we move back and forth of stages i want to hold file input value — Srikanth Gowda
– Srikanth Gowda, Commented Jul 19, 2018 at 12:13

Tholle · Accepted Answer · 2018-07-19 12:36:39Z

24

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, 2018 at 12:36

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Srikanth Gowda Over a year ago

thanks man got the point,i thought we can hold file input value programatically.

Tholle Over a year ago

@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.

Srikanth Gowda Over a year ago

Thank you,it worked. you catch the point perfectly.best answer

Miguel Carrero · Accepted Answer · 2023-01-24 22:00:39Z

3

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, 2023 at 22:00

Miguel Carrero

311 bronze badge

1 Comment

ptim Over a year ago

developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData

Collectives™ on Stack Overflow

how to hold file input value in react

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related