b-form-file issue with "accept" values - in "multiple" mode
See original GitHub issueI found what to me looks like a strange behaviour of b-form-file
component. I set an instance of b-form-file
to support selecting multiple files, and specified accept
MIME types, exactly like it’s shown in the docs (just skipped the image/gif
type):
<b-file v-model="files" multiple accept="image/jpeg, image/png"></b-file>
But when dropping any files (single or multiple) on the input doesn’t update the model - the component simply ignores all the files, even valid ones. When picking files manually, instead of dropping them, the non-accepted files are disabled in the browser file select dialog (in Chrome), so that’s OK. But then again - choosing any JPG or PNG file doesn’t update the model, and the event emitted by the component has an empty payload.
b-form-file
still behaves as expected when not in “multiple” mode.
OS: macOS High Sierra Browsers: Chrome 63, Firefox 57 Bootstrap: 4.beta-2 BootstrapVue: 1.4.0
Issue Analytics
- State:
- Created 6 years ago
- Comments:13 (1 by maintainers)
String.prototype.match()
takes the parameterthis.accept
as regex.@mmieluch Therefore, the comma in your accept prop can’t be parsed by regex.
And I agree to @Diaskhan‘s opinion,
String.prototype.match()
is a misusage here.we can pass the regular expression into accept property and it will work properly Example:
<b-form-file :accept="image/png|image/jpeg|image/jpg|text/plain" multiple plain></b-form-file>