fix(payload): applies resize after cropping if resizeOptions are defined (#8528)

Fixes #7592

packages/payload/src/uploads/generateFileData.ts

@@ -236,23 +236,58 @@ export const generateFileData = async <T>({
         withMetadata,
       })
 
-      filesToSave.push({
-        buffer: croppedImage,
-        path: `${staticPath}/${fsSafeName}`,
-      })
+      // Apply resize after cropping to ensure it conforms to resizeOptions
+      if (resizeOptions) {
+        const resizedAfterCrop = await sharp(croppedImage)
+          .resize({
+            fit: resizeOptions?.fit || 'cover',
+            height: resizeOptions?.height,
+            position: resizeOptions?.position || 'center',
+            width: resizeOptions?.width,
+          })
+          .toBuffer({ resolveWithObject: true })
 
-      fileForResize = {
-        ...file,
-        data: croppedImage,
-        size: info.size,
+        filesToSave.push({
+          buffer: resizedAfterCrop.data,
+          path: `${staticPath}/${fsSafeName}`,
+        })
+
+        fileForResize = {
+          ...fileForResize,
+          data: resizedAfterCrop.data,
+          size: resizedAfterCrop.info.size,
+        }
+
+        fileData.width = resizedAfterCrop.info.width
+        fileData.height = resizedAfterCrop.info.height
+        if (fileIsAnimatedType) {
+          const metadata = await sharpFile.metadata()
+          fileData.height = metadata.pages
+            ? resizedAfterCrop.info.height / metadata.pages
+            : resizedAfterCrop.info.height
+        }
+        fileData.filesize = resizedAfterCrop.info.size
+      } else {
+        // If resizeOptions is not present, just save the cropped image
+        filesToSave.push({
+          buffer: croppedImage,
+          path: `${staticPath}/${fsSafeName}`,
+        })
+
+        fileForResize = {
+          ...file,
+          data: croppedImage,
+          size: info.size,
+        }
+
+        fileData.width = info.width
+        fileData.height = info.height
+        if (fileIsAnimatedType) {
+          const metadata = await sharpFile.metadata()
+          fileData.height = metadata.pages ? info.height / metadata.pages : info.height
+        }
+        fileData.filesize = info.size
       }
-      fileData.width = info.width
-      fileData.height = info.height
-      if (fileIsAnimatedType) {
-        const metadata = await sharpFile.metadata()
-        fileData.height = metadata.pages ? info.height / metadata.pages : info.height
-      }
-      fileData.filesize = info.size
 
       if (file.tempFilePath) {
         await fs.promises.writeFile(file.tempFilePath, croppedImage) // write fileBuffer to the temp path

test/uploads/e2e.spec.ts

@@ -619,6 +619,35 @@ describe('uploads', () => {
       // without focal point update this generated size was equal to 1736
       expect(redDoc.sizes.focalTest.filesize).toEqual(1598)
     })
+
+    test('should resize image after crop if resizeOptions defined', async () => {
+      await page.goto(animatedTypeMediaURL.create)
+      await page.waitForURL(animatedTypeMediaURL.create)
+
+      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('.file-field__edit').click()
+
+      // set crop
+      await page.locator('.edit-upload__input input[name="Width (px)"]').fill('400')
+      await page.locator('.edit-upload__input input[name="Height (px)"]').fill('800')
+      // set focal point
+      await page.locator('.edit-upload__input input[name="X %"]').fill('75') // init left focal point
+      await page.locator('.edit-upload__input input[name="Y %"]').fill('50') // init top focal point
+
+      await page.locator('button:has-text("Apply Changes")').click()
+      await page.waitForSelector('button#action-save')
+      await page.locator('button#action-save').click()
+      await expect(page.locator('.payload-toast-container')).toContainText('successfully')
+      await wait(1000) // Wait for the save
+
+      const resizeOptionMedia = page.locator('.file-meta .file-meta__size-type')
+      await expect(resizeOptionMedia).toContainText('200x200')
+    })
   })
 
   test('should see upload previews in relation list if allowed in config', async () => {