File input not updating state correctly React?

Question

Ok so I have a form that has file inputs on it for images (and it previews the image before submission) but only the first input updates (no matter which input I use to put my image up).

Here are the repro steps:

Click "Add Question" button 2 or more times
Click (because drop doesn't work yet) on the second dropzone and upload a file.
See that the first dropzone updates and not the second

Here's a CodeSandbox for it.

And here is my code for the drop zone component:

class DropZone extends Component {

    constructor(props){
      super(props)
      this.state = {
        file: "",
        fileId: uuid()
      }
      this.handleChange = this.handleChange.bind(this)

    }

    handleChange(event) {
      this.setState({
        file: URL.createObjectURL(event.target.files[0])
      })
      //document.getElementsByClassName("dropZone").style.backgroundImage = 'url(' + this.state.file + ')';
    }

  render() {
    return (
      <div >
        <input type="file" id="file" name="file" class="inputFile" onChange={this.handleChange}/>
        <label  key={uuid()} for="file" value={this.state.file} onchange={this.handleChange}>
          <div class="dropZone" key={uuid()}>
            Drop or Choose File
            <img src={this.state.file} id="pic" name="file" accept="image/*"/>
          </div>
        </label>
        <div>
      </div>
      </div>
    );
  }
}

I am new to React and JS so any explanation would help loads. Thanks!

Anshul Bansal · Accepted Answer · 2018-07-27 19:50:58Z

It is not an issue with React but with HTML bindings. You need to provide a unique id to the input box and the label htmlFor attribute. I have updated the code below. and your code sandbox here -> https://codesandbox.io/s/kkj7j61noo

class DropZone extends Component {

    constructor(props){
      super(props)
      this.state = {
        file: "",
        fileId: uuid()
      }
      this.handleChange = this.handleChange.bind(this)

    }

    handleChange(event) {
      this.setState({
        file: URL.createObjectURL(event.target.files[0])
      })
      //document.getElementsByClassName("dropZone").style.backgroundImage = 'url(' + this.state.file + ')';
    }

  render() {
    const uniqueId = this.state.fileId;
    return (
      <div >
        <input type="file" id={uniqueId} name={uniqueId} class="inputFile" onChange={this.handleChange}/>
        <label  key={uuid()} htmlFor={uniqueId} value={this.state.file}>
          <div class="dropZone" key={uuid()}>
            Drop or Choose File
            <img src={this.state.file} id="pic" name="file" accept="image/*"/>
          </div>
        </label>
        <div>
      </div>
      </div>
    );
  }
}

Collectives™ on Stack Overflow

File input not updating state correctly React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related