Q:

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

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/

A:

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>

