Bootstrap-Vue Form File Input does not check file-format when dropping

1
votes

I'm using the Bootstrap-Vue component in a Vue-project with the accept prop set to "image/*". It works fine with the Browse-Button, but i can still drop all kind of files to the file-form and it accepts it. Is this a bug or am i missing something?

<b-form-file
   accept="image/*"
   v-model="file"
   :state="null"
   placeholder="Choose a file or drop it here..."
   drop-placeholder="Drop file here..."
></b-form-file>
1
vue.jsbootstrap-vue

1 Answers

4
votes

Bootstrap-Vue's <b-form-file> component, is a wrapper for a native <input type="file"> element. Where the input is not visible and instead shows a customized label, but still utilizes the input for file handling.

That means it will function the same way as the native input, which allows anything to be dropped into it. Even when having accept="image/*" applied. (at least in Chrome)

You will probably need to do some manual validation when your v-model changes to make sure it's in a correct format.

You could for example create a watcher to reset the input if it's an invalid file.

watch: {
  file(newFile) {
    if(newFile && !newFile.type.startsWith("image/")) {
      this.$nextTick(() => {
        this.file = null;        
      })
    }
  }
}