fix(FileUpload): ensure native validation works with required (#5358)

Author: benjamincanac

src/runtime/components/FileUpload.vue

@@ -125,7 +125,7 @@ export interface FileUploadSlots<M extends boolean = false> {
 
 <script setup lang="ts" generic="M extends boolean = false">
 import { computed, watch } from 'vue'
-import { Primitive } from 'reka-ui'
+import { Primitive, VisuallyHidden } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig, useLocale } from '#imports'
 import { useFormField } from '../composables/useFormField'
@@ -252,15 +252,17 @@ function removeFile(index?: number) {
 }
 
 watch(modelValue, (newValue) => {
-  const hasModelReset = !Array.isArray(newValue) || !newValue.length
+  const hasModelReset = props.multiple ? !(newValue as File[])?.length : !newValue
 
-  if (hasModelReset && inputRef.value) {
-    inputRef.value.value = ''
+  if (hasModelReset && inputRef.value?.$el) {
+    inputRef.value.$el.value = ''
   }
 })
 
 defineExpose({
-  inputRef,
+  get inputRef() {
+    return inputRef.value?.$el as HTMLInputElement
+  },
   dropzoneRef
 })
 </script>
@@ -365,18 +367,18 @@ defineExpose({
       <ReuseFilesTemplate v-if="position === 'outside'" />
     </slot>
 
-    <input
+    <VisuallyHidden
       :id="id"
       ref="inputRef"
+      as="input"
       type="file"
+      feature="fully-hidden"
       :name="name"
       :accept="accept"
       :multiple="(multiple as boolean)"
       :required="required"
       :disabled="disabled"
       v-bind="{ ...$attrs, ...ariaAttrs }"
-      class="sr-only"
-      tabindex="-1"
-    >
+    />
   </Primitive>
 </template>

src/runtime/composables/useFileUpload.ts

@@ -1,4 +1,5 @@
 import { ref, computed, unref, onMounted, watch, reactive } from 'vue'
+import type { VisuallyHidden } from 'reka-ui'
 import { useFileDialog, useDropZone } from '@vueuse/core'
 import type { MaybeRef } from '@vueuse/core'
 
@@ -45,12 +46,12 @@ export function useFileUpload(options: UseFileUploadOptions) {
     dropzone = true,
     onUpdate
   } = options
-  const inputRef = ref<HTMLInputElement>()
+  const inputRef = ref<InstanceType<typeof VisuallyHidden>>()
   const dropzoneRef = ref<HTMLDivElement>()
 
   const dataTypes = computed(() => parseAcceptToDataTypes(unref(accept)))
 
-  const onDrop = (files: FileList | File[] | null) => {
+  const onDrop = (files: FileList | File[] | null, fromDropZone = false) => {
     if (!files || files.length === 0) {
       return
     }
@@ -60,6 +61,18 @@ export function useFileUpload(options: UseFileUploadOptions) {
     if (files.length > 1 && !multiple) {
       files = [files[0]!]
     }
+
+    // Sync dropped files to the input element for proper native validation
+    if (fromDropZone && inputRef.value?.$el) {
+      try {
+        const dt = new DataTransfer()
+        files.forEach(file => dt.items.add(file))
+        inputRef.value.$el.files = dt.files
+      } catch (e) {
+        console.warn('Could not sync files to input element:', e)
+      }
+    }
+
     onUpdate(files)
   }
 
@@ -75,7 +88,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
 
   onMounted(() => {
     const { isOverDropZone } = dropzone
-      ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
+      ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop: files => onDrop(files, true) })
       : { isOverDropZone: ref(false) }
 
     watch(isOverDropZone, (value) => {
@@ -85,13 +98,13 @@ export function useFileUpload(options: UseFileUploadOptions) {
     const { onChange, open } = useFileDialog({
       accept: unref(accept),
       multiple,
-      input: unref(inputRef),
+      input: unref(inputRef)?.$el,
       reset
     })
 
     fileDialog.open = open
 
-    onChange(fileList => onDrop(fileList))
+    onChange(fileList => onDrop(fileList, false))
   })
 
   return {