15
<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?

techKid-Rinshad
  • 177
  • 1
  • 2
  • 9

4 Answers4

18

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>
McRist
  • 1,708
  • 11
  • 16
14

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()
}
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
1

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
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
spydr
  • 11
  • 1
0
                    <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>
sai Ramakrishna
  • 1
  • 1