fix(payload, ui): unable to save animated file types with undefined image sizes (#6757)

## Description

V2 PR [here](https://github.com/payloadcms/payload/pull/6733)

Additionally fixes issue with image thumbnails not updating properly
until page refresh.

Image thumbnails properly update on document save now.

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] Existing test suite passes locally with my changes

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

@@ -91,7 +91,7 @@ describe('Upload', () => {
     await uploadImage()
     await expect(page.locator('.file-field .file-details img')).toHaveAttribute(
       'src',
-      '/api/uploads/file/payload-1.jpg',
+      /\/api\/uploads\/file\/payload-1\.jpg(\?.*)?$/,
     )
   })
 

test/uploads/config.ts

@@ -10,6 +10,7 @@ import { AdminThumbnailSize } from './collections/AdminThumbnailSize/index.js'
 import { Uploads1 } from './collections/Upload1/index.js'
 import { Uploads2 } from './collections/Upload2/index.js'
 import {
+  animatedTypeMedia,
   audioSlug,
   enlargeSlug,
   focalNoSizesSlug,
@@ -290,6 +291,42 @@ export default buildConfigWithDefaults({
         ],
       },
     },
+    {
+      slug: animatedTypeMedia,
+      fields: [],
+      upload: {
+        staticDir: path.resolve(dirname, './media'),
+        resizeOptions: {
+          position: 'center',
+          width: 200,
+          height: 200,
+        },
+        imageSizes: [
+          {
+            name: 'squareSmall',
+            width: 480,
+            height: 480,
+            position: 'centre',
+            withoutEnlargement: false,
+          },
+          {
+            name: 'undefinedHeight',
+            width: 300,
+            height: undefined,
+          },
+          {
+            name: 'undefinedWidth',
+            width: undefined,
+            height: 300,
+          },
+          {
+            name: 'undefinedAll',
+            width: undefined,
+            height: undefined,
+          },
+        ],
+      },
+    },
     {
       slug: enlargeSlug,
       fields: [],
@@ -501,6 +538,43 @@ export default buildConfigWithDefaults({
       },
     })
 
+    // Create animated type images
+    const animatedImageFilePath = path.resolve(dirname, './animated.webp')
+    const animatedImageFile = await getFileByPath(animatedImageFilePath)
+
+    await payload.create({
+      collection: animatedTypeMedia,
+      data: {},
+      file: animatedImageFile,
+    })
+
+    await payload.create({
+      collection: versionSlug,
+      data: {
+        _status: 'published',
+        title: 'upload',
+      },
+      file: animatedImageFile,
+    })
+
+    const nonAnimatedImageFilePath = path.resolve(dirname, './non-animated.webp')
+    const nonAnimatedImageFile = await getFileByPath(nonAnimatedImageFilePath)
+
+    await payload.create({
+      collection: animatedTypeMedia,
+      data: {},
+      file: nonAnimatedImageFile,
+    })
+
+    await payload.create({
+      collection: versionSlug,
+      data: {
+        _status: 'published',
+        title: 'upload',
+      },
+      file: nonAnimatedImageFile,
+    })
+
     // Create audio
     const audioFilePath = path.resolve(dirname, './audio.mp3')
     const audioFile = await getFileByPath(audioFilePath)

test/uploads/e2e.spec.ts

@@ -22,6 +22,7 @@ import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import {
   adminThumbnailFunctionSlug,
   adminThumbnailSizeSlug,
+  animatedTypeMedia,
   audioSlug,
   mediaSlug,
   relationSlug,
@@ -35,6 +36,7 @@ let payload: PayloadTestSDK<Config>
 let client: RESTClient
 let serverURL: string
 let mediaURL: AdminUrlUtil
+let animatedTypeMediaURL: AdminUrlUtil
 let audioURL: AdminUrlUtil
 let relationURL: AdminUrlUtil
 let adminThumbnailSizeURL: AdminUrlUtil
@@ -52,6 +54,7 @@ describe('uploads', () => {
     await client.login()
 
     mediaURL = new AdminUrlUtil(serverURL, mediaSlug)
+    animatedTypeMediaURL = new AdminUrlUtil(serverURL, animatedTypeMedia)
     audioURL = new AdminUrlUtil(serverURL, audioSlug)
     relationURL = new AdminUrlUtil(serverURL, relationSlug)
     adminThumbnailSizeURL = new AdminUrlUtil(serverURL, adminThumbnailSizeSlug)
@@ -120,6 +123,26 @@ describe('uploads', () => {
     await saveDocAndAssert(page)
   })
 
+  test('should create animated file upload', async () => {
+    await page.goto(animatedTypeMediaURL.create)
+
+    await page.setInputFiles('input[type="file"]', path.resolve(dirname, './animated.webp'))
+    const animatedFilename = page.locator('.file-field__filename')
+
+    await expect(animatedFilename).toHaveValue('animated.webp')
+
+    await saveDocAndAssert(page)
+
+    await page.goto(animatedTypeMediaURL.create)
+
+    await page.setInputFiles('input[type="file"]', path.resolve(dirname, './non-animated.webp'))
+    const nonAnimatedFileName = page.locator('.file-field__filename')
+
+    await expect(nonAnimatedFileName).toHaveValue('non-animated.webp')
+
+    await saveDocAndAssert(page)
+  })
+
   test('should show resized images', async () => {
     await page.goto(mediaURL.edit(pngDoc.id))
 
@@ -209,7 +232,7 @@ describe('uploads', () => {
     // choose from existing
     await openDocDrawer(page, '.list-drawer__toggler')
 
-    await expect(page.locator('.cell-title')).toContainText('draft')
+    await expect(page.locator('.row-3 .cell-title')).toContainText('draft')
   })
 
   test('should restrict mimetype based on filterOptions', async () => {

test/uploads/getMimeType.ts

@@ -21,6 +21,9 @@ export const getMimeType = (
     case 'svg':
       type = 'image/svg+xml'
       break
+    case 'webp':
+      type = 'image/webp'
+      break
     default:
       type = 'image/png'
   }

test/uploads/payload-types.ts

@@ -190,6 +190,53 @@ export interface Media {
     };
   };
 }
+export interface AnimatedTypeMedia {
+  id: string
+  updatedAt: string
+  createdAt: string
+  url?: string
+  filename?: string
+  mimeType?: string
+  filesize?: number
+  width?: number
+  height?: number
+  focalX?: number
+  focalY?: number
+  sizes?: {
+    squareSmall?: {
+      url?: string
+      width?: number
+      height?: number
+      mimeType?: string
+      filesize?: number
+      filename?: string
+    }
+    undefinedHeight?: {
+      url?: string
+      width?: number
+      height?: number
+      mimeType?: string
+      filesize?: number
+      filename?: string
+    }
+    undefinedWidth?: {
+      url?: string
+      width?: number
+      height?: number
+      mimeType?: string
+      filesize?: number
+      filename?: string
+    }
+    undefinedAll?: {
+      url?: string
+      width?: number
+      height?: number
+      mimeType?: string
+      filesize?: number
+      filename?: string
+    }
+  }
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "versions".
@@ -821,6 +868,6 @@ export interface PayloadMigration {
 
 
 declare module 'payload' {
-  // @ts-ignore 
+  // @ts-ignore
   export interface GeneratedTypes extends Config {}
-}
+}

test/uploads/shared.ts

@@ -10,3 +10,4 @@ export const adminThumbnailFunctionSlug = 'admin-thumbnail-function'
 export const adminThumbnailSizeSlug = 'admin-thumbnail-size'
 export const unstoredMediaSlug = 'unstored-media'
 export const versionSlug = 'versions'
+export const animatedTypeMedia = 'animated-type-media'