onChange() is not a function. Trigger onChange() manually

Question

I've got a file selector, when clicking the button, the file selector shows up:

<input id='example' type="file" accept="image/*" onChange={this.onImageChange} />

Now I want to use another button to do that, trigger the input above :

<button onClick={() => {
    var element = document.getElementById('example');

    console.log(element) // This shows <input id="example" type="file" accept="image/*">

    // element.onChange() // Error: onChange() is not a function

    // Above doesn't work, so I try to trigger the onChange event manually,
    // but below doesn't do anything
    var event = new Event('change');
    element.dispatchEvent(event);
}}></button>

It looks like you want to trigger a click event on the file input element in order to show the file selector. onChange will only fire when you actually select a file — JConstantine
– JConstantine, Commented Feb 13, 2019 at 21:30
Possible duplicate of Programmatically set the value of a type="file" input HTML element? — rishat
– rishat, Commented Feb 13, 2019 at 21:33
Possible duplicate of Programmatically trigger "select file" dialog box — Oscar Franco
– Oscar Franco, Commented Feb 13, 2019 at 22:17

Diogo Aleixo · Accepted Answer · 2019-02-13 21:36:33Z

4

If that is react you should not access the Dom for those kind of stuff. They have one Api to give you what you need.

You want one uncontroller component. In order to do that you can use one reference.

I havent tried but i think you can do this.

Create the ref on the constructor

this.inputRef = React.createRef();

Then assign the input ref prop to this.inputRef

<input ref={this.inputRef} id='example' type="file" accept="image/*" onChange={this.onImageChange} />

And lately dispatch the click.

this.inputRef.current.click();

Hope it works

answered Feb 13, 2019 at 21:36

Diogo Aleixo

8711 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Gottfried · Accepted Answer · 2019-02-13 22:58:27Z

1

element.onChange is not a method because your onChange function is stored in your react Component class and delegated via React's synthetic event emitter. It is a property of React.createElement('input'), but is not a property of an actual DOM element.

To call your React element's onChange method, you can call it directly, like this.onChange(event).

The problem with that methodology is your event will not have a target attached to it.

The change method is meant to provide an interface for controlling the value of inputs, so if you want to change the file attached to the input, you should simply change its value in state.

this.setState({file: this.alternateFile})

answered Feb 13, 2019 at 22:58

Jeremy Gottfried

1,2111 gold badge16 silver badges32 bronze badges

Comments

Oscar Franco · Accepted Answer · 2019-02-13 21:33:06Z

0

The onChange function is a callback AFTER a file has been selected.

If what you want is to show the file selector with another button, you can take a look into this answer

Bear in mind, because of security reasons you need to trigger the selector on the onClick function, user input IS NECESSARY.

answered Feb 13, 2019 at 21:33

Oscar Franco

6,3206 gold badges38 silver badges71 bronze badges

1 Comment

Oscar Franco Over a year ago

Why the down vote? at the very least this is a duplicate of the question I linked.

Collectives™ on Stack Overflow

onChange() is not a function. Trigger onChange() manually

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related