fix: file objects being serialized to plain objects in upload form state (#14818)

### What?

Fixes a bug where saving an upload document would fail with `"[object
Object]" is not valid JSON` error after changing the file and then
modifying another field.

### Why?

When a file was changed in an upload document and saved, the File object
would persist in the client-side form state.

On the next save (when modifying a different field), the form state
would be deep copied and serialized before submission. This
serialization converted the File object into a plain object `{name,
size, type, ...}`, which was then stringified to `"[object Object]"` and
sent to the server, causing a JSON parsing error.

### How?

1. **Preserve File objects during serialization**
- Added instanceof File check in
`deepCopyObjectSimpleWithoutReactComponents` to return File objects
as-is instead of serializing them to plain objects
   - Similar to how Date objects are already handled

2. **Clear file field after successful save**
- Delete the `file` field from form state after save in upload
collections
   - Prevents stale File objects from persisting between saves

I could of just added an instanceof File check in
[createFormData](https://github.com/payloadcms/payload/blob/1340818097c90904ff9e0facb5b30329bbeb430e/packages/ui/src/forms/Form/index.tsx#L528)
but it would be just a bandaid fix. If a non-File object reaches that
code, it indicates a bug elsewhere that should fail loudly. The root
causes were:
- File objects being incorrectly serialized during form submission
- File objects persisting in form state after they should be cleared

Fixes #14814

Author: PatrikKozak

packages/payload/src/utilities/deepCopyObject.ts

@@ -150,6 +150,10 @@ export function deepCopyObjectSimpleWithoutReactComponents<T extends JsonValue>(
       typeof e !== 'object' || e === null ? e : deepCopyObjectSimpleWithoutReactComponents(e),
     ) as T
   } else {
+    // Handle File objects by returning them as-is (don't serialize to plain object)
+    if (value instanceof File) {
+      return value as unknown as T
+    }
     if (value instanceof Date) {
       return new Date(value) as unknown as T
     }

packages/ui/src/views/Edit/index.tsx

@@ -353,6 +353,12 @@ export function DefaultEditView({
           skipValidation: true,
         })
 
+        // For upload collections, clear the file field from the returned state
+        // to prevent the File object from persisting in form state after save
+        if (upload && state) {
+          delete state.file
+        }
+
         // Unlock the document after save
         if (isLockingEnabled) {
           setDocumentIsLocked(false)

test/uploads/e2e.spec.ts

@@ -1842,4 +1842,29 @@ describe('Uploads', () => {
     await expect(menuList.getByText('Sizes > four > File Size', { exact: true })).toHaveCount(1)
     await expect(menuList.getByText('Sizes > four > File Name', { exact: true })).toHaveCount(1)
   })
+
+  test('should allow saving other fields after changing file', async () => {
+    await page.goto(uploadsTwo.create)
+
+    // Upload initial file with required field
+    await page.setInputFiles('input[type="file"]', path.resolve(dirname, './image.png'))
+    await page.locator('#field-prefix').fill('initial')
+    await saveDocAndAssert(page)
+
+    await page.locator('button[data-close-button="true"]').click()
+
+    // Change the file
+    await page.locator('.file-details__remove').click()
+    await page.setInputFiles('input[type="file"]', path.resolve(dirname, './test-image.jpg'))
+    await saveDocAndAssert(page)
+
+    await page.locator('button[data-close-button="true"]').click()
+
+    // Modify another field and save - this should work without errors
+    await page.locator('#field-title').fill('updated title')
+    await saveDocAndAssert(page)
+
+    const titleField = page.locator('#field-title')
+    await expect(titleField).toHaveValue('updated title')
+  })
 })

test/uploads/payload-types.ts

@@ -198,6 +198,7 @@ export interface Config {
   db: {
     defaultIDType: string;
   };
+  fallbackLocale: ('false' | 'none' | 'null') | false | null | ('en' | 'es' | 'fr') | ('en' | 'es' | 'fr')[];
   globals: {};
   globalsSelect: {};
   locale: 'en' | 'es' | 'fr';

test/uploads/shared.ts

@@ -44,3 +44,4 @@ export const svgOnlySlug = 'svg-only'
 export const anyImagesSlug = 'any-images'
 export const mediaWithoutDeleteAccessSlug = 'media-without-delete-access'
 export const mediaWithImageSizeAdminPropsSlug = 'media-with-image-size-admin-props'
+export const uploads2Slug = 'uploads-2'