feat(FileUpload): add directUpdate option to skip upload preview

[dennisadriaans]

🔗 Linked issue

Resolves #5367

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

In some cases, we would like to skip the preview step and simply emit the change event. For example, in a Google Drive-like environment, the file should be uploaded immediately upon drop, removing the need for an explicit submission of the queue or a preview.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5366

commit: a183f6c

[vercel]

When directUpdate is enabled, the component emits the change event with raw files but never updates modelValue, causing files to not display in the UI and creating a disconnect between the event payload and component state.

View Details

📝 Patch Details

diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index e481598a..e56ff625 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -219,14 +219,7 @@ function formatFileSize(bytes: number): string {
 }
 
 function onUpdate(files: File[], reset = false) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  let event = new Event('change', { target: { value: files } })
-
-  if (props.directUpdate) {
-    emits('change', event)
-    return
-  }
-
+  // Update modelValue first to ensure files display in UI
   if (props.multiple) {
     if (reset) {
       modelValue.value = files as (M extends true ? File[] : File) | null
@@ -238,6 +231,14 @@ function onUpdate(files: File[], reset = false) {
     modelValue.value = files?.[0] as (M extends true ? File[] : File) | null
   }
 
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  let event = new Event('change', { target: { value: files } })
+
+  if (props.directUpdate) {
+    emits('change', event)
+    return
+  }
+
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   event = new Event('change', { target: { value: modelValue.value } })
   emits('change', event)

Analysis

FileUpload onUpdate() bypasses modelValue update when directUpdate=true

What fails: FileUpload component's onUpdate() function (lines 221-228) returns early when directUpdate is true without updating modelValue, causing uploaded files not to display in the UI

How to reproduce:

// Mount FileUpload with directUpdate=true
const wrapper = mount(FileUpload, { props: { directUpdate: true } })
const input = wrapper.find('input')
await setFilesOnInput(input, [new File(['test'], 'test.jpg')])
// modelValue remains null, template shows no files

Result: Template condition v-if="modelValue && (Array.isArray(modelValue) ? modelValue.length : true)" evaluates to false, files don't render in UI despite successful upload and event emission

Expected: Files should display in dropzone UI regardless of directUpdate mode - modelValue should be updated before the early return in directUpdate path

Fix: Move modelValue update logic before directUpdate check so template can render files in both modes while preserving different event payload behaviors

[benjamincanac]

@dennisadriaans What do you think of #5443 instead? A simple :preview="false" prop which hides the preview without affecting the model value.