Prevent default (showing file dialog) on form file input in Bootstrap-Vue

Question

I'm trying to override the default file browser dialog with a custom function when the user clicks on the file selection dialog as shown below in Bootstrap-Vue.

The code is

<b-form-file
  v-on:click.prevent
  v-model="file"
  :state="Boolean(file)"
  placeholder="Choose a file or drop it here..."
  drop-placeholder="Drop file here..."
></b-form-file>

I tried adding v-on:click.prevent, and @click="function (e) {e.preventdefault()}" but those don't work for me.

https://bootstrap-vue.js.org/docs/components/form-file/

try v-on:click.native.prevent, since <b-form-file> is a component, you need to tell it to listen to a native browser event. — Troy Morehouse
– Troy Morehouse, Commented Sep 7, 2019 at 0:01
And since b-form-file is inside a <div> wrapper, you may want to add on the .capture modifier to trap the event before it reaches the input — Troy Morehouse
– Troy Morehouse, Commented Sep 7, 2019 at 3:13
@TroyMorehouse thank you, that works to suppress the dialog. How can I now trigger a custom function on click (e.g. alert("hello world"))? I tried adding @click='alert("hello world")' but I'm only able to get that to work when added to a div wrapped around the <b-form-file> tag — Nic Scozzaro
– Nic Scozzaro, Commented Sep 8, 2019 at 15:32
@TroyMorehouse, yes that solves my problem! Thank you sir :) — Nic Scozzaro
– Nic Scozzaro, Commented Sep 9, 2019 at 14:46

Troy Morehouse · Accepted Answer · 2019-09-17 03:29:27Z

1

The way to prevent the default file browser from showing (and to run your own action on click) would be something similar to the following:

<b-form-file @click.native.prevent="alert('Hello world')"></b-form-file>

edited Sep 17, 2019 at 3:29

answered Sep 16, 2019 at 0:04

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Prevent default (showing file dialog) on form file input in Bootstrap-Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related