fix(ui): ensure up-to-date upload preview thumbnails in admin panel (#15029)

### What?

Ensure the preview thumbnails in list view table cells and edit view
upload fields are up-to-date with the actual uploaded/edited images.

### Why?

A thumbnail for an uploaded image may be shown in several places:

* List view of the upload collection
* List view and edit view of other collections that have an upload field
linking to the upload collection

After editing an image, the thumbnail of the unedited version may still
be shown in these places due to browser caching.

### How?

This sets the `imageCacheTag` property for the `Thumbnail` component to
force the component to load the latest thumbnail image.

Fixes #15027

---------

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>
Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

Author: 3 people

packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx

@@ -53,6 +53,7 @@ export const FileCell: React.FC<FileCellProps> = ({
             filename,
           }}
           fileSrc={fileSrc}
+          imageCacheTag={collectionConfig?.upload?.cacheTags && rowData?.updatedAt}
           size="small"
           uploadConfig={collectionConfig?.upload}
         />

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

@@ -152,6 +152,7 @@ export function UploadComponentHasMany(props: Props) {
                       showCollectionSlug={showCollectionSlug}
                       src={src}
                       thumbnailSrc={thumbnailSrc}
+                      updatedAt={value.updatedAt}
                       withMeta={false}
                       x={value?.width as number}
                       y={value?.height as number}

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

@@ -86,6 +86,7 @@ export function UploadComponentHasOne(props: Props) {
         showCollectionSlug={showCollectionSlug}
         src={src}
         thumbnailSrc={thumbnailSrc}
+        updatedAt={value.updatedAt}
         x={value?.width as number}
         y={value?.height as number}
       />

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

@@ -34,6 +34,7 @@ type Props = {
   readonly showCollectionSlug?: boolean
   readonly src: string
   readonly thumbnailSrc: string
+  readonly updatedAt?: string
   readonly withMeta?: boolean
   readonly x?: number
   readonly y?: number
@@ -55,6 +56,7 @@ export function RelationshipContent(props: Props) {
     showCollectionSlug = false,
     src,
     thumbnailSrc,
+    updatedAt,
     withMeta = true,
     x,
     y,
@@ -106,6 +108,7 @@ export function RelationshipContent(props: Props) {
             className={`${baseClass}__thumbnail`}
             filename={filename}
             fileSrc={thumbnailSrc}
+            imageCacheTag={collectionConfig?.upload?.cacheTags && updatedAt}
             size="small"
           />
         )}

test/fields/collections/Upload/e2e.spec.ts

@@ -175,7 +175,7 @@ describe('Upload', () => {
 
     await expect(
       page.locator('.field-type.upload .upload-relationship-details img'),
-    ).toHaveAttribute('src', '/api/uploads/file/payload-1.png')
+    ).toHaveAttribute('src', /\/api\/uploads\/file\/payload-1\.png(\?.*)?$/)
     await saveDocAndAssert(page)
   })
 
@@ -214,7 +214,7 @@ describe('Upload', () => {
     ).toContainText('payload-1.png')
     await expect(
       page.locator('.field-type.upload .upload-relationship-details img'),
-    ).toHaveAttribute('src', '/api/uploads/file/payload-1.png')
+    ).toHaveAttribute('src', /\/api\/uploads\/file\/payload-1\.png(\?.*)?$/)
     await saveDocAndAssert(page)
   })
 

test/uploads/e2e.spec.ts

@@ -59,6 +59,13 @@ import { startMockCorsServer } from './startMockCorsServer.js'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
+/**
+ * Regex matcher for date cache tags.
+ *
+ * @example it will match `?2022-01-01T00%3A00%3A00.000Z` (`?2022-01-01T00:00:00.000Z` encoded)
+ */
+const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}%3A\d{2}%3A\d{2}\.\d{3}Z/
+
 const { afterAll, beforeAll, beforeEach, describe } = test
 
 let payload: PayloadTestSDK<Config>
@@ -640,7 +647,7 @@ describe('Uploads', () => {
     const genericUploadImage = page.locator('tr.row-1 .thumbnail img')
     await expect(genericUploadImage).toHaveAttribute(
       'src',
-      'https://raw.githubusercontent.com/payloadcms/website/refs/heads/main/public/images/universal-truth.jpg',
+      /^https:\/\/raw\.githubusercontent\.com\/payloadcms\/website\/refs\/heads\/main\/public\/images\/universal-truth\.jpg(\?.*)?$/,
     )
   })
 
@@ -671,17 +678,14 @@ describe('Uploads', () => {
     await page.goto(mediaWithoutCacheTagsSlugURL.edit(imageDoc!.id))
 
     const genericUploadImage = page.locator('.file-details .thumbnail img')
+    await expect(genericUploadImage).not.toHaveAttribute('src', cacheTagPattern)
+  })
 
-    const src = await genericUploadImage.getAttribute('src')
-
-    /**
-     * Regex matcher for date cache tags.
-     *
-     * @example it will match `?2022-01-01T00%3A00%3A00.000Z` (`?2022-01-01T00:00:00.000Z` encoded)
-     */
-    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}%3A\d{2}%3A\d{2}\.\d{3}Z/
+  test('should render adminThumbnail without the additional cache tag in upload collection list', async () => {
+    await page.goto(mediaWithoutCacheTagsSlugURL.list)
 
-    expect(src).not.toMatch(cacheTagPattern)
+    const genericUploadImage = page.locator('tr.row-1 .thumbnail img')
+    await expect(genericUploadImage).not.toHaveAttribute('src', cacheTagPattern)
   })
 
   test('should render adminThumbnail with the cache tag by default', async () => {
@@ -701,17 +705,37 @@ describe('Uploads', () => {
     await page.goto(adminThumbnailFunctionURL.edit(imageDoc!.id))
 
     const genericUploadImage = page.locator('.file-details .thumbnail img')
+    await expect(genericUploadImage).toHaveAttribute('src', cacheTagPattern)
+  })
 
-    const src = await genericUploadImage.getAttribute('src')
+  test('should render adminThumbnail with the cache tag in upload collection list by default', async () => {
+    await page.goto(adminThumbnailFunctionURL.list)
+
+    const genericUploadImage = page.locator('tr.row-1 .thumbnail img')
+    await expect(genericUploadImage).toHaveAttribute('src', cacheTagPattern)
+  })
+
+  test('should render adminThumbnail with the cache tag in relation list by default', async () => {
+    await page.goto(relationPreviewURL.list)
+
+    const relationPreview1 = page.locator('.cell-imageWithPreview1 img')
+    await expect(relationPreview1).toHaveAttribute('src', cacheTagPattern)
+  })
+
+  test('should render adminThumbnail with the cache tag in upload field by default', async () => {
+    const relationPreviewDoc = (
+      await payload.find({
+        collection: relationPreviewSlug,
+        depth: 0,
+        limit: 1,
+        pagination: false,
+      })
+    ).docs[0]
 
-    /**
-     * Regex matcher for date cache tags.
-     *
-     * @example it will match `?2022-01-01T00%3A00%3A00.000Z` (`?2022-01-01T00:00:00.000Z` encoded)
-     */
-    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}%3A\d{2}%3A\d{2}\.\d{3}Z/
+    await page.goto(relationPreviewURL.edit(relationPreviewDoc!.id))
 
-    expect(src).toMatch(cacheTagPattern)
+    const relationPreview1 = page.locator('#field-imageWithPreview1 .thumbnail img')
+    await expect(relationPreview1).toHaveAttribute('src', cacheTagPattern)
   })
 
   test('should render adminThumbnail when using a specific size', async () => {
@@ -1863,7 +1887,7 @@ describe('Uploads', () => {
       const thumbnail = page.locator('#field-withAdminThumbnail div.thumbnail > img')
       await expect(thumbnail).toHaveAttribute(
         'src',
-        'https://raw.githubusercontent.com/payloadcms/website/refs/heads/main/public/images/universal-truth.jpg',
+        /^https:\/\/raw\.githubusercontent\.com\/payloadcms\/website\/refs\/heads\/main\/public\/images\/universal-truth\.jpg(\?.*)?$/,
       )
     })
 
@@ -1875,7 +1899,7 @@ describe('Uploads', () => {
       const thumbnail = page.locator('#field-withinRange div.thumbnail > img')
       await expect(thumbnail).toHaveAttribute(
         'src',
-        /\/api\/enlarge\/file\/test-image-180x50\.jpg$/,
+        /\/api\/enlarge\/file\/test-image-180x50\.jpg(\?.*)?$/,
       )
     })
 
@@ -1887,7 +1911,7 @@ describe('Uploads', () => {
       const thumbnail = page.locator('#field-nextSmallestOutOfRange div.thumbnail > img')
       await expect(thumbnail).toHaveAttribute(
         'src',
-        /\/api\/focal-only\/file\/test-image-400x300\.jpg$/,
+        /\/api\/focal-only\/file\/test-image-400x300\.jpg(\?.*)?$/,
       )
     })
 
@@ -1897,7 +1921,7 @@ describe('Uploads', () => {
       await page.setInputFiles('input[type="file"]', path.join(dirname, 'small.png'))
       await page.locator('dialog button#action-save').click()
       const thumbnail = page.locator('#field-original div.thumbnail > img')
-      await expect(thumbnail).toHaveAttribute('src', /\/api\/focal-only\/file\/small\.png$/)
+      await expect(thumbnail).toHaveAttribute('src', /\/api\/focal-only\/file\/small\.png(\?.*)?$/)
     })
   })