feat(VFileUpload, VFileInput): filter-by-type prop (#21576)

resolves #21150

Author: J-Sek

packages/api-generator/src/locale/en/VFileInput.json

@@ -1,6 +1,5 @@
 {
   "props": {
-    "accept": "One or more [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) describing file types to allow.",
     "chips": "Changes display of selections to chips.",
     "counter": "Displays the number of selected files.",
     "counterSizeString": "The text displayed when using the **counter** and **show-size** props. Can also be customized globally on the [internationalization page](/customization/internationalization).",

packages/api-generator/src/locale/en/generic.json

@@ -53,6 +53,7 @@
     "size": "Sets the height and width of the component.",
     "subtitle": "Specify a subtitle text for the component.",
     "start": "Applies margin at the end of the component.",
+    "filterByType": "Make the input accept only files matched by one or more [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers). Applies to drag & drop and selecting folders. Emits `rejected` event when some files do not pass through to make it possible to notify user and deliver better user experience.",
     "symbol": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/).",
     "tag": "Specify a custom tag used on the root element.",
     "text": "Specify content text for the component.",
@@ -97,6 +98,7 @@
     "click:prependInner": "Emitted when prepended inner icon is clicked.",
     "input": "The updated bound model.",
     "group:selected": "Event that is emitted when an item is selected within a group.",
+    "rejected": "Emitted when some of the files from user input, drop or folder selection did not pass through `strict-accept` filter.",
     "update:focused": "Event that is emitted when the component's focus state changes.",
     "update:menu": "Event that is emitted when the component's menu state changes.",
     "update:modelValue": "Event that is emitted when the component's model changes.",

packages/docs/src/data/new-in.json

@@ -76,6 +76,16 @@
       "glow": "3.8.0"
     }
   },
+  "VFileInput": {
+    "props": {
+      "filterByType": "3.10.0"
+    }
+  },
+  "VFileUpload": {
+    "props": {
+      "filterByType": "3.10.0"
+    }
+  },
   "VIcon": {
     "props": {
       "opacity": "3.8.0"

packages/vuetify/src/components/VFileInput/VFileInput.tsx

@@ -10,6 +10,7 @@ import { makeVInputProps, VInput } from '@/components/VInput/VInput'
 
 // Composables
 import { useFileDrop } from '@/composables/fileDrop'
+import { makeFileFilterProps, useFileFilter } from '@/composables/fileFilter'
 import { useFocus } from '@/composables/focus'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { useLocale } from '@/composables/locale'
@@ -75,6 +76,7 @@ export const makeVFileInputProps = propsFactory({
     },
   },
 
+  ...makeFileFilterProps(),
   ...makeVFieldProps({ clearable: true }),
 }, 'VFileInput')
 
@@ -90,10 +92,12 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
     'mousedown:control': (e: MouseEvent) => true,
     'update:focused': (focused: boolean) => true,
     'update:modelValue': (files: File | File[]) => true,
+    rejected: (files: File[]) => true,
   },
 
   setup (props, { attrs, emit, slots }) {
     const { t } = useLocale()
+    const { filterAccepted } = useFileFilter(props)
     const model = useProxiedModel(
       props,
       'modelValue',
@@ -172,13 +176,39 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
 
       if (!inputRef.value || !hasFilesOrFolders(e)) return
 
+      const allDroppedFiles = await handleDrop(e)
+      selectAccepted(allDroppedFiles)
+    }
+
+    function onFileSelection (e: Event) {
+      if (!e.target || (e as any).repack) return // prevent loop
+
+      if (!props.filterByType) {
+        const target = e.target as HTMLInputElement
+        model.value = [...target.files ?? []]
+      } else {
+        selectAccepted([...(e as any).target.files])
+      }
+    }
+
+    function selectAccepted (files: File[]) {
       const dataTransfer = new DataTransfer()
-      for (const file of await handleDrop(e)) {
+      const { accepted, rejected } = filterAccepted(files)
+
+      if (rejected.length) {
+        emit('rejected', rejected)
+      }
+
+      for (const file of accepted) {
         dataTransfer.items.add(file)
       }
 
-      inputRef.value.files = dataTransfer.files
-      inputRef.value.dispatchEvent(new Event('change', { bubbles: true }))
+      inputRef.value!.files = dataTransfer.files
+      model.value = [...dataTransfer.files]
+
+      const event = new Event('change', { bubbles: true }) as any
+      event.repack = true
+      inputRef.value!.dispatchEvent(event)
     }
 
     watch(model, newValue => {
@@ -196,6 +226,9 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
       const { modelValue: _, ...inputProps } = VInput.filterProps(props)
       const fieldProps = VField.filterProps(props)
 
+      const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false
+      const inputAccept = expectsDirectory ? undefined : (props.filterByType ?? String(attrs.accept))
+
       return (
         <VInput
           ref={ vInputRef }
@@ -253,6 +286,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                       <input
                         ref={ inputRef }
                         type="file"
+                        accept={ inputAccept }
                         readonly={ isReadonly.value }
                         disabled={ isDisabled.value }
                         multiple={ props.multiple }
@@ -264,12 +298,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
 
                           onFocus()
                         }}
-                        onChange={ e => {
-                          if (!e.target) return
-
-                          const target = e.target as HTMLInputElement
-                          model.value = [...target.files ?? []]
-                        }}
+                        onChange={ onFileSelection }
                         onDragleave={ onDragleave }
                         onFocus={ onFocus }
                         onBlur={ blur }

packages/vuetify/src/composables/__tests__/fileFilter.spec.ts

@@ -0,0 +1,58 @@
+// Composables
+import { useFileFilter } from '../fileFilter'
+
+describe('fileFilter', () => {
+  it('by extension', () => {
+    const { filterAccepted } = useFileFilter({ filterByType: '.pdf' })
+    const { accepted, rejected } = filterAccepted([
+      new File([], 'file_1.pdf', { type: 'application/pdf' }),
+      new File([], 'file_2.txt', { type: 'text/plain' }),
+      new File([], 'file_3.pdf', { type: 'application/pdf' }),
+      new File([], 'file_4.png', { type: 'image/png' }),
+    ])
+    expect(accepted.map(x => x.name)).toEqual(['file_1.pdf', 'file_3.pdf'])
+    expect(rejected.map(x => x.name)).toEqual(['file_2.txt', 'file_4.png'])
+  })
+
+  it('by type', () => {
+    const { filterAccepted } = useFileFilter({ filterByType: 'image/png, image/jpeg' })
+    const { accepted, rejected } = filterAccepted([
+      new File([], 'file_1.pdf', { type: 'application/pdf' }),
+      new File([], 'file_2.png', { type: 'image/png' }),
+      new File([], 'file_3.jpeg', { type: 'image/jpeg' }),
+      new File([], 'file_4.jpg', { type: 'image/jpeg' }),
+      new File([], 'file_5.htm', { type: 'text/html' }),
+    ])
+    expect(accepted.map(x => x.name)).toEqual(['file_2.png', 'file_3.jpeg', 'file_4.jpg'])
+    expect(rejected.map(x => x.name)).toEqual(['file_1.pdf', 'file_5.htm'])
+  })
+
+  it('by type with wildcard', () => {
+    const { filterAccepted } = useFileFilter({ filterByType: 'video/*' })
+    const { accepted, rejected } = filterAccepted([
+      new File([], 'file_1.mp4', { type: 'video/mp4' }),
+      new File([], 'file_2.mpeg', { type: 'video/mpeg' }),
+      new File([], 'file_3.gif', { type: 'image/gif' }),
+      new File([], 'file_4.wav', { type: 'audio/wav' }),
+    ])
+    expect(accepted.map(x => x.name)).toEqual(['file_1.mp4', 'file_2.mpeg'])
+    expect(rejected.map(x => x.name)).toEqual(['file_3.gif', 'file_4.wav'])
+  })
+
+  it('by mixed rules', () => {
+    const { filterAccepted } = useFileFilter({ filterByType: 'font/*,application/manifest+json,.zip' })
+    const { accepted, rejected } = filterAccepted([
+      new File([], 'file_1.css', { type: 'text/css' }),
+      new File([], 'file_2.jpg', { type: 'image/jpeg' }),
+      new File([], 'file_3.rar', { type: 'application/vnd.rar' }),
+      new File([], 'file_4.zip', { type: 'application/x-zip-compressed' }),
+      new File([], 'file_5.js', { type: 'text/javascript' }),
+      new File([], 'file_6.woff2', { type: 'font/woff2' }),
+      new File([], 'file_7.woff', { type: 'font/woff' }),
+      new File([], 'file_8.ico', { type: 'image/vnd.microsoft.icon' }),
+      new File([], 'file_9.webmanifest', { type: 'application/manifest+json' }),
+    ])
+    expect(accepted.map(x => x.name)).toEqual(['file_4.zip', 'file_6.woff2', 'file_7.woff', 'file_9.webmanifest'])
+    expect(rejected.map(x => x.name)).toEqual(['file_1.css', 'file_2.jpg', 'file_3.rar', 'file_5.js', 'file_8.ico'])
+  })
+})

packages/vuetify/src/composables/fileFilter.ts

@@ -0,0 +1,54 @@
+// Utilities
+import { computed } from 'vue'
+import { propsFactory } from '@/util'
+
+export interface FileFilterProps {
+  filterByType?: string
+}
+
+export type FileFilterResult = {
+  accepted: File[]
+  rejected: File[]
+}
+
+// Composables
+export const makeFileFilterProps = propsFactory({
+  filterByType: String,
+}, 'file-accept')
+
+export function useFileFilter (props: FileFilterProps) {
+  const fileFilter = computed(() => props.filterByType ? createFilter(props.filterByType) : null)
+
+  function filterAccepted (files: File[]): FileFilterResult {
+    if (fileFilter.value) {
+      const accepted = files.filter(fileFilter.value)
+      return {
+        accepted,
+        rejected: files.filter(f => !accepted.includes(f)),
+      }
+    }
+    return {
+      accepted: files,
+      rejected: [],
+    }
+  }
+
+  return {
+    filterAccepted,
+  }
+}
+
+function createFilter (v: string): ((v: File) => boolean) {
+  const types = v.split(',').map(x => x.trim().toLowerCase())
+  const extensionsToMatch = types.filter(x => x.startsWith('.'))
+  const wildcards = types.filter(x => x.endsWith('/*'))
+  const typesToMatch = types.filter(x => !extensionsToMatch.includes(x) && !wildcards.includes(x))
+
+  return (file: File): boolean => {
+    const extension = file.name.split('.').at(-1)?.toLowerCase() ?? ''
+    const typeGroup = file.type.split('/').at(0)?.toLowerCase() ?? ''
+    return typesToMatch.includes(file.type) ||
+      extensionsToMatch.includes(`.${extension}`) ||
+      wildcards.includes(`${typeGroup}/*`)
+  }
+}

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

@@ -14,6 +14,7 @@ import { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'
 import { makeDelayProps } from '@/composables/delay'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { useFileDrop } from '@/composables/fileDrop'
+import { makeFileFilterProps, useFileFilter } from '@/composables/fileFilter'
 import { IconValue } from '@/composables/icons'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
@@ -78,6 +79,7 @@ export const makeVFileUploadProps = propsFactory({
   showSize: Boolean,
   name: String,
 
+  ...makeFileFilterProps(),
   ...makeDelayProps(),
   ...makeDensityProps(),
   ...pick(makeVDividerProps({
@@ -95,11 +97,13 @@ export const VFileUpload = genericComponent<VFileUploadSlots>()({
 
   emits: {
     'update:modelValue': (files: File[]) => true,
+    rejected: (files: File[]) => true,
   },
 
-  setup (props, { attrs, slots }) {
+  setup (props, { attrs, emit, slots }) {
     const { t } = useLocale()
     const { densityClasses } = useDensity(props)
+    const { filterAccepted } = useFileFilter(props)
     const model = useProxiedModel(
       props,
       'modelValue',
@@ -131,13 +135,39 @@ export const VFileUpload = genericComponent<VFileUploadSlots>()({
 
       if (!inputRef.value) return
 
+      const allDroppedFiles = await handleDrop(e)
+      selectAccepted(allDroppedFiles)
+    }
+
+    function onFileSelection (e: Event) {
+      if (!e.target || (e as any).repack) return // prevent loop
+
+      if (!props.filterByType) {
+        const target = e.target as HTMLInputElement
+        model.value = [...target.files ?? []]
+      } else {
+        selectAccepted([...(e as any).target.files])
+      }
+    }
+
+    function selectAccepted (files: File[]) {
       const dataTransfer = new DataTransfer()
-      for (const file of await handleDrop(e)) {
+      const { accepted, rejected } = filterAccepted(files)
+
+      if (rejected.length) {
+        emit('rejected', rejected)
+      }
+
+      for (const file of accepted) {
         dataTransfer.items.add(file)
       }
 
-      inputRef.value.files = dataTransfer.files
-      inputRef.value.dispatchEvent(new Event('change', { bubbles: true }))
+      inputRef.value!.files = dataTransfer.files
+      model.value = [...dataTransfer.files]
+
+      const event = new Event('change', { bubbles: true }) as any
+      event.repack = true
+      inputRef.value!.dispatchEvent(event)
     }
 
     function onClick () {
@@ -161,19 +191,18 @@ export const VFileUpload = genericComponent<VFileUploadSlots>()({
       const dividerProps = VDivider.filterProps(props)
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
 
+      const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false
+      const inputAccept = expectsDirectory ? undefined : (props.filterByType ?? String(attrs.accept))
+
       const inputNode = (
         <input
           ref={ inputRef }
           type="file"
+          accept={ inputAccept }
           disabled={ props.disabled }
           multiple={ props.multiple }
           name={ props.name }
-          onChange={ e => {
-            if (!e.target) return
-
-            const target = e.target as HTMLInputElement
-            model.value = [...target.files ?? []]
-          }}
+          onChange={ onFileSelection }
           { ...inputAttrs }
         />
       )