From c417e3a627dbaf8e8f1226ef28cfa2aeb1b81466 Mon Sep 17 00:00:00 2001
From: Patrik <patrik@payloadcms.com>
Date: Mon, 3 Mar 2025 14:58:39 -0500
Subject: [PATCH] fix: avif images not converting to `upload.formatOptions` set
 file types (#11505)

Previously, AVIF images were not converted to other file types as
expected, despite `upload.formatOptions` specifying a different file
type.

The issue was due to `canResizeImage` not recognizing `'image/avif',`
causing `fileSupportsResize` to return `false` and preventing the image
from undergoing format conversion.

This fix updates `canResizeImage` to include `'image/avif'`, ensuring
that AVIF images are processed correctly and converted to a different
file type when specified in `formatOptions`.

Fixes #10694
Fixes #9985
---
 packages/payload/src/uploads/canResizeImage.ts |   6 +++++-
 test/uploads/e2e.spec.ts                       |  13 +++++++++++++
 test/uploads/test-image-avif.avif              | Bin 0 -> 495 bytes
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 test/uploads/test-image-avif.avif

diff --git a/packages/payload/src/uploads/canResizeImage.ts b/packages/payload/src/uploads/canResizeImage.ts
index 15f4c63b1..b3df32d1b 100644
--- a/packages/payload/src/uploads/canResizeImage.ts
+++ b/packages/payload/src/uploads/canResizeImage.ts
@@ -1,3 +1,7 @@
 export function canResizeImage(mimeType: string): boolean {
-  return ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/tiff'].indexOf(mimeType) > -1
+  return (
+    ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/tiff', 'image/avif'].indexOf(
+      mimeType,
+    ) > -1
+  )
 }
diff --git a/test/uploads/e2e.spec.ts b/test/uploads/e2e.spec.ts
index 6d1032b9c..5ccb6d42b 100644
--- a/test/uploads/e2e.spec.ts
+++ b/test/uploads/e2e.spec.ts
@@ -223,6 +223,19 @@ describe('Uploads', () => {
     await saveDocAndAssert(page)
   })
 
+  test('should properly convert avif image to png', async () => {
+    await page.goto(mediaURL.create)
+
+    await page.setInputFiles('input[type="file"]', path.resolve(dirname, './test-image-avif.avif'))
+    const filename = page.locator('.file-field__filename')
+    await expect(filename).toHaveValue('test-image-avif.avif')
+
+    await saveDocAndAssert(page)
+
+    const fileMetaSizeType = page.locator('.file-meta__size-type')
+    await expect(fileMetaSizeType).toHaveText(/image\/png/)
+  })
+
   test('should create animated file upload', async () => {
     await page.goto(animatedTypeMediaURL.create)
 
diff --git a/test/uploads/test-image-avif.avif b/test/uploads/test-image-avif.avif
new file mode 100644
index 0000000000000000000000000000000000000000..111d24b178f8f77ea227228f6937445da3be4c46
GIT binary patch
literal 495
zcmZQzU{FXasVqn=%S>Yc0uY^>nP!-qnV9D5Xy^nK`jnemk_eIm0*#E6oFWL5fuSHX
zxdg@r(K(q(Fk|=%GD~v7a*RMyE;A=T8N_p8U|<A75XrzO1*ES6u|{TQ9@uWMj1-WQ
z$^;Y!@e<1n44w0H^1)VSWfl|_0L8sC3zGAJv`A)gK`KZg0|T=H1TzQ}WL9K?ML0M(
zfHY5HnW1wd3lB(0I5|J3C@(puf`JJL85@8?;+X}xi6A*306L6?k*S#l$h@1Il2{_d
zz{Mr0R`{pBiG_uk!{`X3U;(46NT9=)U01s5cU=8fe@&p@drh174t1k!mY<%Js<&(V
zt-hGSzHP$yIh+xjVhg`FzuzAJ`jhQeh6UkfG38elZ#lTNB$%B;K<Z%CvRNq){r8Jp
z30-AywqqCPMWdQM?7!OUOD4Y&k;}RAYfpJ~702a99{oV&*!KpNFOD$kwam*smXr5t
zn%Sl2orWn>ym^~f&&%Jk{L?8N-=jv}mArp{ODqd`D*Wf<^t+`|qR~>U#TRs}8pRd1
S{fzojwvM|kBFI%-$N>Nk9+L<F

literal 0
HcmV?d00001