b-form-file issue with "accept" values - in "multiple" mode

Link to JSFiddle

I 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

[JackEggie]

I guesse the problem in bootstrap-vue/src/components/form-file/form-file.vue

Line 299 in 142d517

                 if (files[i].type.match(this.accept)) {

String.prototype.match() takes the parameter this.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.

[tomattos]

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>