Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Closed
mmieluch opened this issue Jan 10, 2018 · 13 comments
Closed

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

mmieluch opened this issue Jan 10, 2018 · 13 comments
Labels
Priority: Critical Type: Bug

Comments

@mmieluch
Copy link

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
@Spatlani
Copy link

+1

2 similar comments
@mayank-shaan
Copy link

+1

@yuta-kawai
Copy link

+1

@Diaskhan
Copy link

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)) {

@iruizeguilaz
Copy link

I have the same problem with multiple b-file, when I select more than one format by extension (for instace: ".pdf, .png") , The element or elements selected are nod added to the model

have you found a solution for this issue?

best regards

@narramadan
Copy link

+1

...Have the same issue

@rdeveen
Copy link

rdeveen commented Jul 6, 2018

+1 should be fixed.

@impowski
Copy link
Contributor

Is someone working on this one?

@impowski impowski mentioned this issue Aug 30, 2018
Merged
@tomattos
Copy link

tomattos commented Sep 5, 2018 •
edited
Loading

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>

@JackEggie
Copy link

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.

tmorehouse pushed a commit that referenced this issue Oct 27, 2018
@impowski @tmorehouse
fix(form-file): issue with "accept" values [fixes #1526, reverts #2028]…
963d478 
… (#2008)

fix(form-file): issue with "accept" values (fixes #1526, reverts #2028)
@Demitroi
Copy link

+1

2 similar comments
@yaroslawww
Copy link

+1

@thomasgerard
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Priority: Critical Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests