fix(form-core): 🐛 File input field - Picking a different file does not trigger rerender (deep equality issue with File/Blob objects)

packages/form-core/src/FormApi.ts

@@ -2267,7 +2267,11 @@ export class FormApi<
       this.baseStore.setState((prev) => {
         return {
           ...prev,
-          values: setBy(prev.values, field, updater),
+          values: setBy(
+            prev.values,
+            field,
+            updater
+          ),
         }
       })
     })

packages/form-core/src/utils.ts

@@ -48,11 +48,16 @@ export function getBy(obj: unknown, path: string | (string | number)[]): any {
  * @private
  */
 export function setBy(obj: any, _path: any, updater: Updater<any>) {
+  const isFile = updater instanceof File
+
   const path = makePathArray(_path)
 
   function doSet(parent?: any): any {
     if (!path.length) {
-      return functionalUpdate(updater, parent)
+      return functionalUpdate(
+        isFile ? { file: updater, uuid: uuid() } : updater,
+        parent,
+      )
     }
 
     const key = path.shift()
@@ -422,6 +427,15 @@ export const isGlobalFormValidationError = (
 }
 
 export function evaluate<T>(objA: T, objB: T) {
+  if (objA instanceof File && objB instanceof File) {
+    return (
+      objA.name === objB.name &&
+      objA.size === objB.size &&
+      objA.type === objB.type &&
+      objA.lastModified === objB.lastModified
+    )
+  }
+
   if (Object.is(objA, objB)) {
     return true
   }

packages/form-core/tests/FormApi.spec.ts

@@ -4096,6 +4096,37 @@ it('should generate a formId if not provided', () => {
   expect(form.formId.length).toBeGreaterThan(1)
 })
 
+it('should set a file value with uuid when setting a field value with File', () => {
+  const form = new FormApi({
+    defaultValues: {
+      avatar: undefined,
+    } as { avatar: unknown },
+  })
+
+  form.mount()
+
+  const firstFile = new File(['first'], 'first.png', { type: 'image/png' })
+  form.setFieldValue('avatar', firstFile)
+
+  const firstValue = form.state.values.avatar as { file: File; uuid: string }
+
+  expect(firstValue).toBeDefined()
+  expect(firstValue.file instanceof File).toBe(true)
+  expect(firstValue.file.name).toBe('first.png')
+  expect(typeof firstValue.uuid).toBe('string')
+  expect(firstValue.uuid.length).toBeGreaterThan(0)
+
+  const secondFile = new File(['second'], 'second.png', { type: 'image/png' })
+  form.setFieldValue('avatar', secondFile)
+
+  const secondValue = form.state.values.avatar as { file: File; uuid: string }
+
+  expect(secondValue.file.name).toBe('second.png')
+  expect(typeof secondValue.uuid).toBe('string')
+  expect(secondValue.uuid.length).toBeGreaterThan(0)
+  expect(secondValue.uuid).not.toBe(firstValue.uuid)
+})
+
 describe('form api event client', () => {
   it('should have debug disabled', () => {
     const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {})