feat: add support for custom image size file names (#7637)

Add support for custom file names in images sizes

```ts
{
  name: 'thumbnail',
  width: 400,
  height: 300,
  generateImageName: ({ height, sizeName, extension, width }) => {
    return `custom-${sizeName}-${height}-${width}.${extension}`
  },
}
```

test/uploads/config.ts

@@ -11,6 +11,7 @@ import {
   animatedTypeMedia,
   audioSlug,
   cropOnlySlug,
+  customFileNameMediaSlug,
   enlargeSlug,
   focalOnlySlug,
   globalWithMedia,
@@ -203,6 +204,23 @@ export default buildConfigWithDefaults({
         },
       },
     },
+    {
+      slug: customFileNameMediaSlug,
+      fields: [],
+      upload: {
+        imageSizes: [
+          {
+            name: 'custom',
+            height: 500,
+            width: 500,
+            generateImageName: ({ extension, height, width, sizeName }) =>
+              `${sizeName}-${width}x${height}.${extension}`,
+          },
+        ],
+        mimeTypes: ['image/png', 'image/jpg', 'image/jpeg'],
+        staticDir: `./${customFileNameMediaSlug}`,
+      },
+    },
     {
       slug: cropOnlySlug,
       fields: [],

test/uploads/e2e.spec.ts

@@ -24,6 +24,7 @@ import {
   withMetadataSlug,
   withOnlyJPEGMetadataSlug,
   withoutMetadataSlug,
+  customFileNameMediaSlug,
 } from './shared'
 
 const { beforeAll, describe } = test
@@ -40,6 +41,7 @@ let withMetadataURL: AdminUrlUtil
 let withoutMetadataURL: AdminUrlUtil
 let withOnlyJPEGMetadataURL: AdminUrlUtil
 let relationPreviewURL: AdminUrlUtil
+let customFileNameURL: AdminUrlUtil
 
 describe('uploads', () => {
   let page: Page
@@ -62,6 +64,7 @@ describe('uploads', () => {
     withoutMetadataURL = new AdminUrlUtil(serverURL, withoutMetadataSlug)
     withOnlyJPEGMetadataURL = new AdminUrlUtil(serverURL, withOnlyJPEGMetadataSlug)
     relationPreviewURL = new AdminUrlUtil(serverURL, relationPreviewSlug)
+    customFileNameURL = new AdminUrlUtil(serverURL, customFileNameMediaSlug)
 
     const context = await browser.newContext()
     page = await context.newPage()
@@ -427,6 +430,25 @@ describe('uploads', () => {
     expect(webpMediaDoc.sizes.sizeThree.filesize).toEqual(211638)
   })
 
+  test('should have custom file name for image size', async () => {
+    await page.goto(customFileNameURL.create)
+    await page.setInputFiles('input[type="file"]', path.resolve(__dirname, './image.png'))
+
+    await expect(page.locator('.file-field__upload .thumbnail img')).toBeVisible()
+
+    await saveDocAndAssert(page)
+
+    await expect(page.locator('.file-details img')).toBeVisible()
+
+    await page.locator('.file-field__previewSizes').click()
+
+    const renamedImageSizeFile = page
+      .locator('.preview-sizes__list .preview-sizes__sizeOption')
+      .nth(1)
+
+    await expect(renamedImageSizeFile).toContainText('custom-500x500.png')
+  })
+
   describe('image manipulation', () => {
     test('should crop image correctly', async () => {
       const positions = {

test/uploads/shared.ts

@@ -15,3 +15,4 @@ export const animatedTypeMedia = 'animated-type-media'
 export const withMetadataSlug = 'with-meta-data'
 export const withoutMetadataSlug = 'without-meta-data'
 export const withOnlyJPEGMetadataSlug = 'with-only-jpeg-meta-data'
+export const customFileNameMediaSlug = 'custom-file-name-media'