Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form File Input (b-form-file) does not work correctly when directories are dropped onto it #4912


Copy link

shaljam commented Mar 9, 2020

Describe the bug

Validation fails when a dropped you drop a directory onto BFormFile. The model seems not processed and contains nested arrays as apposed to selecting the same directory. When using the open dialog, this works fine and the model is an Array of Files.
This makes the validation fail as we can see this in the validator:

(isArray(val) && (val.length === 0 || val.every(isFile)))

Steps to reproduce the bug

  1. Create a b-form-file setting multiple and directory
  2. Drop a directory onto the b-form-file
  3. Validation on b-form-file fails:
[Vue warn]: Invalid prop: custom validator check failed for prop "value".

found in

---> <BFormFile>
  1. You can also check that model value is not correct (and it is what makes the validation fail). It should be an array of files like when files are selected. But it is a nested array.
  2. Validation failing makes the b-form-file not setting the file-name-formatter result.

Expected behavior

Model value should be set correctly, validation should not fail, and the result of file-name-formatter should be set.



  • BootstrapVue: 2.6.1
  • Bootstrap: 4.4.1
  • Vue: 2.6.11


  • Device: Mac
  • OS: macOS Mojave 10.14.4 (18E226)
  • Browser: Chrome / FireFox
  • Version: 80.0.3987.132 / 73.0.1 (64-bit)

Demo link

Additional context

I was going to use Array.prototype.flat() to flatten the model array. But I noticed the component is in a bad state when validation fails. I also found that the presence of multiple does not affect this problem.

Copy link

When directories are dropped (on browsers that support directory mode), the result can be a nested array (of only a directory is dropped).

If you select a file plus a directory and drag those, you will see an array passed with two entries, one being the file, and the other entry an array containing the directory's files.

jacobmllr95 added a commit that referenced this issue Mar 9, 2020
…fixes #4912) (#4913)

* fix(b-form-file): fix value prop validation when using directory mode

Fixes #4912

* Update form-file.js

* Update form-file.js

* Update form-file.js

* Update form-file.js

* Update form-file.js

* Update form-file.js

* Update form-file.js

Co-authored-by: Jacob Müller <>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment