fix(VFileUpload): adding/replacing files with dropzone click (#22741)

Abdulqudus001 · J-Sek · commit eb95c9ef3c37 · 2026-03-23T13:37:37.000+01:00
- drop area should still be clickable after file selection (unless it shows the files within) - accidental click should not clear the field (this behavior is aligned with other UI frameworks) resolves #22737
diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx b/packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx
@@ -136,13 +136,14 @@ export const VFileUpload = genericComponent<VFileUploadSlots>()({
 
     function onFileSelection (e: Event) {
       if (!e.target || (e as any).repack) return // prevent loop
+      const target = e.target as HTMLInputElement
+      const selectedFiles = [...target.files ?? []]
+      if (!selectedFiles.length) return
 
       if (!props.filterByType) {
-        const target = e.target as HTMLInputElement
-        const newFiles = [...target.files ?? []]
-        model.value = props.multiple ? [...model.value, ...newFiles] : newFiles
+        model.value = props.multiple ? [...model.value, ...selectedFiles] : selectedFiles
       } else {
-        selectAccepted([...(e as any).target.files])
+        selectAccepted(selectedFiles)
       }
     }
 
diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUploadDropzone.tsx b/packages/vuetify/src/labs/VFileUpload/VFileUploadDropzone.tsx
@@ -181,7 +181,7 @@ export const VFileUploadDropzone = genericComponent<VFileUploadDropzoneSlots>()(
           class={[
             'v-file-upload-dropzone',
             {
-              'v-file-upload-dropzone--clickable': !hasBrowse && !hasFiles,
+              'v-file-upload-dropzone--clickable': !hasBrowse,
               'v-file-upload-dropzone--disabled': disabled,
               'v-file-upload-dropzone--dragging': isDragging.value,
               'v-file-upload-dropzone--has-files': hasFiles,
@@ -195,7 +195,7 @@ export const VFileUploadDropzone = genericComponent<VFileUploadDropzoneSlots>()(
           onDragleave={ onDragleave }
           onDragover={ onDragover }
           onDrop={ onDrop }
-          onClick={ !hasBrowse && !hasFiles ? onClickBrowse : undefined }
+          onClick={ !hasBrowse && !(isInset && hasFiles) ? onClickBrowse : undefined }
         >
           { slots.default?.({
             isDragging: isDragging.value,
