Trigger form file bootstrap vue with button

Question

Hi i have a problem about triggering component b-form-file.

<b-form-file ref="imageProfile"></b-form-file>

I try with this.$refs.imageProfile.click() not work. And i see not found click function on that element.

Thank You.

Your `imageProfile` ref is a Vue component, not a standard element. It has no `click` method — Phil, Jul 19 '18 at 06:17
Possible duplicate of [In JavaScript can I make a "click" event fire programmatically for a file input element?](https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input) — Phil, Jul 19 '18 at 06:22
I wrote a slightly more detailed answer how to use here: https://stackoverflow.com/a/68959062/4720160 — Michael S, Aug 28 '21 at 19:41

score 10 · Answer 1 · answered Sep 06 '19 at 08:24

The file form component of bootstrap-vue is a little different, for someone still get this problem, try this:

<b-form-file ref="pickImage" v-model="file" :state="Boolean(file)"></b-form-file>

this.$refs.pickImage.$el.childNodes[0].click();

hope this help !

score 6 · Answer 2 · edited Jul 15 '22 at 00:48

6

You need to trigger the click on the element, not the component.

Try this:

this.$refs.imageProfile.$el.click()

edited Jul 15 '22 at 00:48

tony19

answered Jul 09 '19 at 07:37

Troy Morehouse

2 Answers2