feat(VFileUpload, VFileInput): strict-accept prop

[J-Sek]

Description

Usually, accept is considered a "mild suggestion" by the browser, and is misunderstood by developers as a way to reliably filter files on the frontend

• it actually only affects opening native file picker and can be easily dismissed
• drag & drop ignores accept and it is a default behavior (not the fault of our implementation)
• when used with webkitdirectory, it makes the native file picker unusable

This PR changes default behavior to make accept strict. While doing so, it may introduce UX degradation - user might be think the page is broken, because accept rules are not obvious or he does not know whether valid files are contained within a folder he drops. New rejected event lets developer handle it by flashing warning with Snackbar or showing small dismissable alert next to the field.

Outlined changes:

• applies strict-accept for drag&drop and regular selection
• avoids passing accept to the underlying input when webkitdirectory is present

TBD: it is quite easy to make a typo in accept value and I am considering prop validation. Dropped it last minute, because it would be relatively larger in comparison to existing prop validators. There are however only 11 groups, so maybe we can revisit this enhancement (source » [...document.querySelectorAll('h2')].map(x => x.innerText)).

resolves #21150

Markup:

<template>
  <v-app>
    <v-container>
      <v-combobox v-model="accept" :items="suggestions" label="accept" clearable />
      <v-alert type="info">
        Verification:
        <ul>
          <li>check selecting with click</li>
          <li>set `webkitdirectory` to directory selection</li>
          <li>drag&drop files or forders with different "accept" value (with and without `webkitdirectory`)</li>
        </ul>
      </v-alert>
      <v-divider class="mb-6" />
      <v-sheet class="pa-2 mb-6" elevation="4">
        Native input for reference: <input :accept="accept" type="file" multiple>
      </v-sheet>
      <!-- <v-file-input v-model="files" :accept="accept" clearable multiple webkitdirectory /> -->
      <v-file-input v-model="files" :strict-accept="accept" clearable multiple />
      <pre>files: {{ files }}</pre>
      <!-- <v-file-upload :accept="accept" multiple webkitdirectory /> -->
      <v-file-upload :strict-accept="accept" multiple />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const files = ref([])

  const accept = ref(null)
  const suggestions = [
    '.pdf',
    'image/jpeg',
    'image/*',
    'image/png, image/jpeg',
    '.png, .jpg, .jpeg',
    'image/*,video/*',
    'image/*,plain/text',
    'plain/text',
    '.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  ]
</script>

[J-Sek]

I am 50/50 on renaming the prop to something like strict-accept or filter-by-type. And it probably should target dev.

[johnleider]

I am 50/50 on renaming the prop to something like strict-accept or filter-by-type. And it probably should target dev.

I like this idea.