How to trigger onChange on <input type='file' /> by another Button click in ReactJS?

Question

<div style={{display: 'grid'}}>
    <button id='plus' onClick={???}>+</button>
    <input id='selectImage' type="file" onChange={fileSelectHandler} />
</div>

Here, I want to trigger the onChange function of input, by clicking the button. How to solve this issue?

Answer 1

Create a ref:

//inside the constructor:
fileRef = React.createRef()
// in your input element
<input id='selectImage' type="file" onChange={fileSelectHandler} ref={this.fileRef} />

Now,

<button id='plus' onClick={this.triggerClick}>+</button>

triggerClick() {
  this.fileRef.current.click()
}