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
– Phil, Commented Jul 19, 2018 at 6:17
Possible duplicate of In JavaScript can I make a "click" event fire programmatically for a file input element? — Phil
– Phil, Commented Jul 19, 2018 at 6:22
I wrote a slightly more detailed answer how to use <b-form-file> here: stackoverflow.com/a/68959062/4720160 — Michael S
– Michael S, Commented Aug 28, 2021 at 19:41

Manh Nguyen · Accepted Answer · 2019-09-06 08:24:20Z

10

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 !

answered Sep 6, 2019 at 8:24

Manh Nguyen

4371 gold badge11 silver badges21 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 00:48:43Z

6

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

Try this:

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

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 9, 2019 at 7:37

Troy Morehouse

5,4351 gold badge30 silver badges40 bronze badges