fix(VFileUpload): filter files based on accepted type if passed (#21150) #21158

jcjp · 2025-03-25T15:21:52Z

Description

Component VFileUpload allows unsupported files to be included in the list if accept type is passed.

Filter file on input via drop or browse
Fixes: [Bug Report][3.7.18] VFileUpload drag-and-drop doesn't use "accept" prop for allowed file types #21150

johnleider · 2025-03-26T02:23:46Z

Do we currently handle this use-case in VFileInput?

jcjp · 2025-03-26T16:07:47Z

Do we currently handle this use-case in VFileInput?

Will check I wasn't able to see if we handle this already there.

MajesticPotatoe · 2025-03-26T16:59:11Z

We currently don't handle this on v-file-input

johnleider · 2025-03-27T14:30:52Z

We currently don't handle this on v-file-input

Would it then be considered a bug for that component as well? If so, let's implement a shared fix.

MajesticPotatoe · 2025-03-27T14:32:25Z

We currently don't handle this on v-file-input

Would it then be considered a bug for that component as well? If so, let's implement a shared fix.

Yes

jcjp · 2025-03-28T15:04:23Z

I will work on adding the fix on VFileInput as well on this PR will update. Updated move the filtering on a shared function and both utilized on VFileUpload and VFileInput, let me know if this solution works thanks!

KaelWD · 2025-04-23T10:28:25Z

This check could probably be moved to the useProxiedModel transformOut callback.

jcjp · 2025-04-25T13:05:49Z

This check could probably be moved to the useProxiedModel transformOut callback.

Thanks will check and try to move this solution to that part.

Copilot

Pull Request Overview

This PR fixes an issue in VFileUpload where files were not being filtered by the accepted type and updates the file input and drag-and-drop event handling accordingly.

Introduces a new helper function filterFilesByAcceptType to restrict files by type.
Updates the model conversion functions in VFileUpload and VFileInput components to apply file filtering.
Adjusts event handlers for drag-and-drop and file input change to use the new filtering logic.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/vuetify/src/util/helpers.ts	Adds the filterFilesByAcceptType helper for file type filtering.
packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx	Integrates file filtering in model conversion and modifies the drag-and-drop event handler.
packages/vuetify/src/components/VFileInput/tests/VFileInput.spec.browser.tsx	Updates the test to include an accept attribute.
packages/vuetify/src/components/VFileInput/VFileInput.tsx	Incorporates file filtering in model conversion and event handlers.

jcjp · 2025-05-03T12:40:06Z

packages/vuetify/src/util/helpers.ts

+export function filterFilesByAcceptType (files: null | FileList | File[], acceptType?: string): File[] {
+  if (!files) return []
+  if (!acceptType) return Array.from(files)
+  return Array.from(files).filter(file => file.type === acceptType)


File type will be dependent provided from the user, like in the example linked on this PR, but do let me know if it is worthwhile to add the suggestion of copilot thanks!

support for image/png, image/jpeg or wildcards image/*?

For this one it will depend on the type the that user set if no type was set it will return what was uploaded by default with no restriction.

So what happens when user sets accept="image/*" and selects jpeg image with type of image/jpeg that does not strictly match the accept attribute value... the file does not pass out of this function. None of the files get out when the user is using wildcards or even comma-separated list of types.

packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx

johnleider · 2025-05-19T13:37:17Z

I don't know how I feel about having all of this functionality in the transform out function: https://github.com/vuetifyjs/vuetify/pull/21158/files#diff-1782c90664c1a45585f4b491f5801e24eeeaca9cd2c0b96ebfa168d37baa4c92R103-R118

@KaelWD is this what you meant?

chore(VFileInput): move filter to shared function chore(VFileUpload): update to use shared function

fix(VFileInput): same with VFileUpload filter if accept type passed refactor(helper): return empty if no files passed refactor(helper): return files as array if no accept type passed

feat(VFileUpload): accept File[] as type input on filter

- to be able to identify the event type when a model change on transform out

- fixes unit test issue on VFileInput not emit change on blur

johnleider · 2025-06-07T01:41:08Z

Bringing @J-Sek into this since he's ventured into file land.

jcjp · 2025-06-15T11:12:23Z

Replaced by: #21576

jcjp self-assigned this Mar 25, 2025

jcjp requested review from johnleider and Spatlani March 25, 2025 15:22

jcjp added labs Must be completed for this component to leave labs C: VFileUpload T: bug Functionality that does not work as intended/expected labels Mar 25, 2025

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch from 8609aa5 to 63b48ca Compare March 27, 2025 11:17

johnleider added this to the v3.7.x milestone Mar 28, 2025

jcjp added the C: VFileInput label Mar 29, 2025

jcjp changed the title ~~fix(VFileUpload): filter only accepted type on drop or browse~~ fix(VFileUpload): filter files based on accepted type if passed Mar 29, 2025

KaelWD modified the milestones: v3.7.x, v3.8.x Apr 1, 2025

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch from d775471 to 3d63982 Compare April 27, 2025 15:18

jcjp requested a review from KaelWD April 27, 2025 15:19

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch 2 times, most recently from 3642a4d to bcc117f Compare April 28, 2025 15:44

johnleider force-pushed the master branch from a2e4439 to 050d544 Compare April 29, 2025 14:49

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch from bcc117f to 99576a1 Compare May 3, 2025 12:32

jcjp requested a review from Copilot May 3, 2025 12:35

Copilot AI reviewed May 3, 2025

View reviewed changes

johnleider added the S: has merge conflicts The pending Pull Request has merge conflicts label May 13, 2025

johnleider removed the request for review from Spatlani May 13, 2025 20:49

jcjp requested a review from eesayas May 18, 2025 05:46

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch from 433ba1c to 5ff49bf Compare May 18, 2025 06:15

jcjp removed the S: has merge conflicts The pending Pull Request has merge conflicts label May 18, 2025

jcjp changed the title ~~fix(VFileUpload): filter files based on accepted type if passed~~ fix(VFileUpload): filter files based on accepted type if passed (#21150) May 18, 2025

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch 2 times, most recently from 8e0e4d4 to ed21f30 Compare May 31, 2025 13:38

jcjp enabled auto-merge (squash) June 4, 2025 10:30

jcjp added 13 commits June 4, 2025 18:31

fix(VFileUpload): filter only accepted type on drop or browse

d4520fc

chore(VFileUpload): resolve lint errors

c6c308a

fix(VFileInput): filter only accepted type on drop or browse

f131125

chore(VFileInput): move filter to shared function chore(VFileUpload): update to use shared function

chore(VFileUpload): resolve lint errors

707cef6

fix(VFileUpload): only filter if accept type is passed

ec6f93c

fix(VFileInput): same with VFileUpload filter if accept type passed refactor(helper): return empty if no files passed refactor(helper): return files as array if no accept type passed

chore(VFileUpload): resolve lint errors

00bb9df

feat(VFileUpload): move the check to useProxiedModel transformOut

3543401

feat(VFileUpload): accept File[] as type input on filter

fix(VFileUpload): lint and build errors

360d91e

chore(VFileUpload): remove duplicate variable

06b5f47

fix(VSelect): lint and build errors

c0633bd

fix(OutputInput): lint error reports

b84dda7

feat(proxiedModal): accept optional event in parameters

b88e766

- to be able to identify the event type when a model change on transform out

fix(VFileInput): only dispatch if event is change or input

9333d52

- fixes unit test issue on VFileInput not emit change on blur

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch from ed21f30 to 9333d52 Compare June 4, 2025 10:34

jcjp requested a review from a team June 4, 2025 10:35

jcjp marked this pull request as draft June 14, 2025 11:32

auto-merge was automatically disabled June 14, 2025 11:32
Pull request was converted to draft

chore(VFileUpload): merge branch master and resolve merge conflicts

e0f8f68

jcjp force-pushed the fix(VFileUpload)/accepts-unsupported-type branch from 4ed69b3 to e0f8f68 Compare June 14, 2025 11:38

jcjp closed this Jun 15, 2025

Uh oh!

fix(VFileUpload): filter files based on accepted type if passed (#21150) #21158

fix(VFileUpload): filter files based on accepted type if passed (#21150) #21158

Uh oh!

Conversation

jcjp commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

johnleider commented Mar 26, 2025

Uh oh!

jcjp commented Mar 26, 2025

Uh oh!

MajesticPotatoe commented Mar 26, 2025

Uh oh!

johnleider commented Mar 27, 2025

Uh oh!

MajesticPotatoe commented Mar 27, 2025

Uh oh!

jcjp commented Mar 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KaelWD commented Apr 23, 2025

Uh oh!

jcjp commented Apr 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

This comment was marked as off-topic.

Uh oh!

jcjp May 3, 2025

Choose a reason for hiding this comment

Uh oh!

eesayas May 5, 2025

Choose a reason for hiding this comment

Uh oh!

jcjp May 18, 2025

Choose a reason for hiding this comment

Uh oh!

J-Sek Jun 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

johnleider commented May 19, 2025

Uh oh!

johnleider commented Jun 7, 2025

Uh oh!

jcjp commented Jun 15, 2025

Uh oh!

Uh oh!

jcjp commented Mar 25, 2025 •

edited

Loading

jcjp commented Mar 28, 2025 •

edited

Loading