fix(FileUpload): ensure native validation works with required #5358
Conversation
commit: |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| get inputRef() { | ||
| return inputRef.value?.$el | ||
| }, |
There was a problem hiding this comment.
| get inputRef() { | |
| return inputRef.value?.$el | |
| }, | |
| inputRef, |
The exposed inputRef and dropzoneRef have inconsistent access patterns. inputRef is a getter returning a DOM element directly, while dropzoneRef remains a ref requiring .value access. This breaks backward compatibility and creates an inconsistent API.
View Details
Analysis
FileUpload component has inconsistent ref exposure patterns breaking API consistency
What fails: FileUpload.vue defineExpose exposes inputRef as getter returning DOM element directly, while dropzoneRef remains a ref, creating inconsistent access patterns that break established component API conventions.
How to reproduce:
<script setup>
const fileUpload = ref()
// These access patterns are inconsistent:
fileUpload.value.inputRef.focus() // Works (direct DOM access)
fileUpload.value.dropzoneRef.value.focus() // Works (ref access)
</script>
<template>
<UFileUpload ref="fileUpload" />
</template>Expected behavior: Both refs should be exposed consistently. Example usage in InputKbdExample.vue shows expected pattern: input.value?.inputRef?.focus() which works with Input component but would break with FileUpload's inconsistent exposure.
Result: FileUpload breaks the established pattern used by Input, Textarea, and Select components which all expose refs directly via defineExpose({ inputRef }), while FileUpload uses a getter that bypasses the ref wrapper.
There was a problem hiding this comment.
@benjamincanac This suggested change makes sense, but it would introduce a breaking change 😬 Seems minor enough to accept it tho?
There was a problem hiding this comment.
No it is incorrect, the inputRef is now bound on a Vue component (VisuallyHidden) which adds a layer over binding directly to an <input>: https://vuejs.org/guide/essentials/template-refs.html#ref-on-component. We need to return $el to access the actual input as before.
| get inputRef() { | ||
| return inputRef.value?.$el | ||
| }, |
There was a problem hiding this comment.
@benjamincanac This suggested change makes sense, but it would introduce a breaking change 😬 Seems minor enough to accept it tho?
|
@benjamincanac I found a small a11y issue here: https://github.com/nuxt/ui/blob/v4/src/runtime/components/FileUpload.vue#L326-L337 the The hidden input should most likely have an |
|
@J-Michalek For the a11y I guess we can open a new PR, but are you sure we should add an |
🔗 Linked issue
Resolves #5210
❓ Type of change
📚 Description
When using the
requiredattribute on FileUpload, native form validation was not working correctly. Files selected via drag-and-drop would bypass the input element entirely, and the validation state was not properly synced.The fix ensures dropped files are synced to the native input element using the DataTransfer API in the useFileUpload composable. This allows the browser's native validation to work correctly for both file dialog selection and drag-and-drop, displaying proper localized validation messages.
📝 Checklist