fix(ui): ensure upload field updates reflect in edit popup changes

packages/ui/src/fields/Upload/HasMany/index.tsx

@@ -11,6 +11,8 @@ import { UploadCard } from '../UploadCard/index.js'
 
 const baseClass = 'upload upload--has-many'
 
+import type { ReloadDoc } from '../types.js'
+
 import './index.scss'
 
 type Props = {
@@ -23,10 +25,12 @@ type Props = {
   readonly onRemove?: (value) => void
   readonly onReorder?: (value) => void
   readonly readonly?: boolean
+  readonly reloadDoc: ReloadDoc
   readonly serverURL: string
 }
 export function UploadComponentHasMany(props: Props) {
-  const { className, fileDocs, isSortable, onRemove, onReorder, readonly, serverURL } = props
+  const { className, fileDocs, isSortable, onRemove, onReorder, readonly, reloadDoc, serverURL } =
+    props
 
   const moveRow = React.useCallback(
     (moveFromIndex: number, moveToIndex: number) => {
@@ -109,6 +113,7 @@ export function UploadComponentHasMany(props: Props) {
                       id={id}
                       mimeType={value?.mimeType as string}
                       onRemove={() => removeItem(index)}
+                      reloadDoc={reloadDoc}
                       src={src}
                       withMeta={false}
                       x={value?.width as number}

packages/ui/src/fields/Upload/HasOne/index.tsx

@@ -4,6 +4,8 @@ import type { JsonObject } from 'payload'
 
 import React from 'react'
 
+import type { ReloadDoc } from '../types.js'
+
 import { RelationshipContent } from '../RelationshipContent/index.js'
 import { UploadCard } from '../UploadCard/index.js'
 import './index.scss'
@@ -18,11 +20,12 @@ type Props = {
   }
   readonly onRemove?: () => void
   readonly readonly?: boolean
+  readonly reloadDoc: ReloadDoc
   readonly serverURL: string
 }
 
 export function UploadComponentHasOne(props: Props) {
-  const { className, fileDoc, onRemove, readonly, serverURL } = props
+  const { className, fileDoc, onRemove, readonly, reloadDoc, serverURL } = props
   const { relationTo, value } = fileDoc
   const id = String(value?.id)
 
@@ -47,6 +50,7 @@ export function UploadComponentHasOne(props: Props) {
         id={id}
         mimeType={value?.mimeType as string}
         onRemove={onRemove}
+        reloadDoc={reloadDoc}
         src={src}
         x={value?.width as number}
         y={value?.height as number}

packages/ui/src/fields/Upload/Input.tsx

@@ -8,7 +8,6 @@ import type {
   FilterOptionsResult,
   JsonObject,
   MappedComponent,
-  PaginatedDocs,
   StaticDescription,
   StaticLabel,
   UploadFieldClient,
@@ -22,6 +21,7 @@ import * as qs from 'qs-esm'
 import React, { useCallback, useEffect, useMemo } from 'react'
 
 import type { ListDrawerProps } from '../../elements/ListDrawer/types.js'
+import type { PopulateDocs, ReloadDoc } from './types.js'
 
 import { useBulkUpload } from '../../elements/BulkUpload/index.js'
 import { Button } from '../../elements/Button/index.js'
@@ -182,11 +182,8 @@ export function UploadInput(props: UploadInputProps) {
     [onChangeFromProps],
   )
 
-  const populateDocs = React.useCallback(
-    async (
-      ids: (number | string)[],
-      relatedCollectionSlug: string,
-    ): Promise<null | PaginatedDocs> => {
+  const populateDocs = React.useCallback<PopulateDocs>(
+    async (ids, relatedCollectionSlug) => {
       const query: {
         [key: string]: unknown
         where: Where
@@ -372,6 +369,29 @@ export function UploadInput(props: UploadInputProps) {
     [closeListDrawer, hasMany, populateDocs, onChange, value, activeRelationTo],
   )
 
+  const reloadDoc = React.useCallback<ReloadDoc>(
+    async (docID, collectionSlug) => {
+      const { docs } = await populateDocs([docID], collectionSlug)
+
+      if (docs[0]) {
+        setPopulatedDocs((currentDocs) => {
+          const existingDocIndex = currentDocs?.findIndex((doc) => {
+            return doc.value.id === docs[0].id && doc.relationTo === collectionSlug
+          })
+          if (existingDocIndex > -1) {
+            const updatedDocs = [...currentDocs]
+            updatedDocs[existingDocIndex] = {
+              relationTo: collectionSlug,
+              value: docs[0],
+            }
+            return updatedDocs
+          }
+        })
+      }
+    },
+    [populateDocs],
+  )
+
   // only hasMany can reorder
   const onReorder = React.useCallback(
     (newValue) => {
@@ -463,6 +483,7 @@ export function UploadInput(props: UploadInputProps) {
                 onRemove={onRemove}
                 onReorder={onReorder}
                 readonly={readOnly}
+                reloadDoc={reloadDoc}
                 serverURL={serverURL}
               />
             ) : (
@@ -482,6 +503,7 @@ export function UploadInput(props: UploadInputProps) {
                 fileDoc={populatedDocs[0]}
                 onRemove={onRemove}
                 readonly={readOnly}
+                reloadDoc={reloadDoc}
                 serverURL={serverURL}
               />
             ) : populatedDocs && value && !populatedDocs?.[0]?.value ? (

packages/ui/src/fields/Upload/RelationshipContent/index.tsx

@@ -1,8 +1,12 @@
 'use client'
 
+import type { TypeWithID } from 'payload'
+
 import { formatFilesize } from 'payload/shared'
 import React from 'react'
 
+import type { ReloadDoc } from '../types.js'
+
 import { Button } from '../../../elements/Button/index.js'
 import { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js'
 import { ThumbnailComponent } from '../../../elements/Thumbnail/index.js'
@@ -21,6 +25,7 @@ type Props = {
   readonly id: number | string
   readonly mimeType: string
   readonly onRemove: () => void
+  readonly reloadDoc: ReloadDoc
   readonly src: string
   readonly withMeta?: boolean
   readonly x?: number
@@ -38,12 +43,18 @@ export function RelationshipContent(props: Props) {
     filename,
     mimeType,
     onRemove,
+    reloadDoc,
     src,
     withMeta = true,
     x,
     y,
   } = props
 
+  const onSave = React.useCallback(
+    async ({ doc }: { doc: TypeWithID }) => reloadDoc(doc.id, collectionSlug),
+    [reloadDoc, collectionSlug],
+  )
+
   const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({
     id,
     collectionSlug,
@@ -108,7 +119,7 @@ export function RelationshipContent(props: Props) {
               onClick={() => onRemove()}
             />
           ) : null}
-          <DocumentDrawer />
+          <DocumentDrawer onSave={onSave} />
         </div>
       ) : null}
     </div>

packages/ui/src/fields/Upload/types.ts

@@ -0,0 +1,8 @@
+import type { PaginatedDocs } from 'payload'
+
+export type PopulateDocs = (
+  ids: (number | string)[],
+  relatedCollectionSlug: string,
+) => Promise<null | PaginatedDocs>
+
+export type ReloadDoc = (docID: number | string, collectionSlug: string) => Promise<void>

test/uploads/e2e.spec.ts

@@ -6,7 +6,7 @@ import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
 
 import type { PayloadTestSDK } from '../helpers/sdk/index.js'
-import type { Config, Media } from './payload-types.js'
+import type { Config, Media, Relation } from './payload-types.js'
 
 import {
   ensureCompilationIsDone,
@@ -58,6 +58,7 @@ describe('uploads', () => {
   let page: Page
   let pngDoc: Media
   let audioDoc: Media
+  let relationDoc: Relation
 
   beforeAll(async ({ browser }, testInfo) => {
     testInfo.setTimeout(TEST_TIMEOUT_LONG)
@@ -96,6 +97,15 @@ describe('uploads', () => {
 
     pngDoc = findPNG.docs[0] as unknown as Media
 
+    const findRelationDoc = await payload.find({
+      collection: relationSlug,
+      depth: 0,
+      limit: 1,
+      pagination: false,
+    })
+
+    relationDoc = findRelationDoc.docs[0] as unknown as Relation
+
     const findAudio = await payload.find({
       collection: audioSlug,
       depth: 0,
@@ -121,6 +131,31 @@ describe('uploads', () => {
     await expect(field).toContainText('image')
   })
 
+  test('should update upload field after editing relationship in document drawer', async () => {
+    await page.goto(relationURL.edit(relationDoc.id))
+    await page.waitForURL(relationURL.edit(relationDoc.id))
+
+    const filename = page.locator('.upload-relationship-details__filename a').nth(0)
+    await expect(filename).toContainText('image.png')
+
+    await page.locator('.upload-relationship-details__edit').nth(0).click()
+    await page.locator('.file-details__remove').click()
+
+    const fileChooserPromise = page.waitForEvent('filechooser')
+    await page.getByText('Select a file').click()
+    const fileChooser = await fileChooserPromise
+    await wait(1000)
+    await fileChooser.setFiles(path.join(dirname, 'test-image.jpg'))
+
+    await page.locator('button#action-save').nth(1).click()
+    await expect(page.locator('.payload-toast-container')).toContainText('successfully')
+    await wait(1000)
+
+    await page.locator('.doc-drawer__header-close').click()
+
+    await expect(filename).toContainText('test-image.png')
+  })
+
   test('should show upload filename in upload collection list', async () => {
     await page.goto(mediaURL.list)
     const audioUpload = page.locator('tr.row-1 .cell-filename')