Skip to content

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

Description

@shaljam

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.

Versions

Libraries:

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

Environment:

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

Demo link

https://jsfiddle.net/k42983pd/

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions