How to trigger onChange on <input type='file' /> by another Button click in ReactJS?
You can hide the original file input, and make it click by javascript on click of the button.
upload() {
document.getElementById("selectImage").click()
}
<div style={{display: 'grid'}}>
<button id='plus' onClick={this.upload}>+</button>
<input id='selectImage' hidden type="file" onChange={fileSelectHandler} />
</div>
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()
}