fix(VFileUpload): stabilize item keys to correctly remove using chips

resolves #21772

Author: J-Sek

packages/vuetify/src/labs/VFileUpload/VFileUploadDropzone.tsx

@@ -18,6 +18,7 @@ import { useLocale } from '@/composables/locale'
 // Utilities
 import { inject, ref, shallowRef, toRef } from 'vue'
 import { genericComponent, pick, propsFactory, useRender } from '@/util'
+import { getFileKey } from './fileKey'
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
@@ -267,6 +268,7 @@ export const VFileUploadDropzone = genericComponent<VFileUploadDropzoneSlots>()(
                 )
               ) : (
                 modelValue.map((file, i) => {
+                  const key = getFileKey(file)
                   const slotProps = {
                     file,
                     props: {
@@ -276,7 +278,7 @@ export const VFileUploadDropzone = genericComponent<VFileUploadDropzoneSlots>()(
 
                   return (
                     <VDefaultsProvider
-                      key={ i }
+                      key={ key }
                       defaults={{
                         VFileUploadItem: {
                           file,
@@ -289,7 +291,7 @@ export const VFileUploadDropzone = genericComponent<VFileUploadDropzoneSlots>()(
                     >
                       { slots.item?.(slotProps) ?? (
                         <VFileUploadItem
-                          key={ i }
+                          key={ key }
                           onClick:remove={ () => onClickRemove(i) }
                         />
                       )}

packages/vuetify/src/labs/VFileUpload/VFileUploadList.tsx

@@ -7,6 +7,7 @@ import { makeVListProps, VList } from '@/components/VList/VList'
 // Utilities
 import { inject } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
+import { getFileKey } from './fileKey'
 
 // Types
 import type { PropType } from 'vue'
@@ -62,6 +63,7 @@ export const VFileUploadList = genericComponent<VFileUploadListSlots>()({
           bgColor="transparent"
         >
           { slots.default?.({ files, onClickRemove: (i: number) => context?.onClickRemove(i) }) ?? files.map((file, index) => {
+            const key = getFileKey(file)
             const slotProps = {
               file,
               props: {
@@ -71,7 +73,7 @@ export const VFileUploadList = genericComponent<VFileUploadListSlots>()({
 
             return (
               <VDefaultsProvider
-                key={ index }
+                key={ key }
                 defaults={{
                   VFileUploadItem: {
                     file,
@@ -84,7 +86,7 @@ export const VFileUploadList = genericComponent<VFileUploadListSlots>()({
               >
                 { slots.item?.(slotProps) ?? (
                   <VFileUploadItem
-                    key={ index }
+                    key={ key }
                     onClick:remove={ () => context?.onClickRemove(index) }
                   />
                 )}

packages/vuetify/src/labs/VFileUpload/fileKey.ts

@@ -0,0 +1,11 @@
+let nextId = 0
+const fileIds = new WeakMap<File, number>()
+
+export function getFileKey (file: File): number {
+  let id = fileIds.get(file)
+  if (id == null) {
+    id = ++nextId
+    fileIds.set(file, id)
+  }
+  return id
+}