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()
}

This works well for me. It will hide the ugly file input component, and allow you to trigger its click function when the button is clicked instead.

import React from 'react'

import {
    Button,
    Input,
    Label
} from 'reactstrap'

class UploadButton extends React.Component {

    constructor(props) {
        super(props)
        this.fileInput = React.createRef() // ref to fileInput

    }

    // when called, triggers fileInput click function
    triggerInputFile = () => {
        if (this.fileInput.current != undefined && this.fileInput.current.click != undefined)
            this.fileInput.current.click()
    }

    // handle file upload 
    handleFileUpload = () => {
        // handle click
    }

    render() {
        var color = 'primary'
        return (
            <div className='content'>
                <Button
                    color={color}
                    onClick={() => this.triggerInputFile()}
                >
                    Upload

                </Button>

                <input
                    ref={this.fileInput}
                    type='file'
                    onClick={() => this.handleFileUpload()}
                    style={styles.input}
                />
            </div>

        )
    }
}


const styles = {
    input: {
        opacity: '0%', // dont want to see it
        position: 'absolute' // does not mess with other elements 
    }
}

export default UploadButton

                    <div
                      class="col-lg-12 col-md-12 col-sm-12 "
                      onClick={() => {
                        this.upload.click();
                      }}
                    >
                      <h4 align="center">
                        <label class="theme-btn btn btn-style-three">
                          <span class="btn-title">
                            {" "}
                            Select From your device
                          </span>
                        </label>
                      </h4>
                      <input
                        name:'image'
                        style={{ visibility: "hidden" }}
                        type="file"
                        onClick={(e) => (e.target.value = null)}
                        ref={(ref) => (this.upload = ref)}
                        onChange={this.onChangeFile.bind(this)}
                        accept="image/*"`enter code here`
  />

                    </div>