fix(payload): calculates correct aspect ratio dimensions on sharp based files (#8537)

v2 PR [here](#8510)

Author: PatrikKozak

packages/payload/src/uploads/imageResizer.ts

@@ -291,6 +291,18 @@ export async function resizeAndTransformImageSizes({
   const sharpBase: Sharp | undefined = sharp(file.tempFilePath || file.data, sharpOptions).rotate() // pass rotate() to auto-rotate based on EXIF data. https://github.com/payloadcms/payload/pull/3081
   const originalImageMeta = await sharpBase.metadata()
 
+  let adjustedDimensions = { ...dimensions }
+
+  // Images with an exif orientation of 5, 6, 7, or 8 are auto-rotated by sharp
+  // Need to adjust the dimensions to match the original image
+  if ([5, 6, 7, 8].includes(originalImageMeta.orientation)) {
+    adjustedDimensions = {
+      ...dimensions,
+      height: dimensions.width,
+      width: dimensions.height,
+    }
+  }
+
   const resizeImageMeta = {
     height: extractHeightFromImage(originalImageMeta),
     width: originalImageMeta.width,
@@ -315,7 +327,7 @@ export async function resizeAndTransformImageSizes({
       if (resizeAction === 'resizeWithFocalPoint') {
         let { height: resizeHeight, width: resizeWidth } = imageResizeConfig
 
-        const originalAspectRatio = dimensions.width / dimensions.height
+        const originalAspectRatio = adjustedDimensions.width / adjustedDimensions.height
 
         // Calculate resizeWidth based on original aspect ratio if it's undefined
         if (resizeHeight && !resizeWidth) {

test/uploads/e2e.spec.ts

@@ -141,6 +141,18 @@ describe('uploads', () => {
     await saveDocAndAssert(page)
   })
 
+  test('should properly create IOS file upload', async () => {
+    await page.goto(mediaURL.create)
+
+    await page.setInputFiles('input[type="file"]', path.resolve(dirname, './ios-image.jpeg'))
+
+    const filename = page.locator('.file-field__filename')
+
+    await expect(filename).toHaveValue('ios-image.jpeg')
+
+    await saveDocAndAssert(page)
+  })
+
   test('should create animated file upload', async () => {
     await page.goto(animatedTypeMediaURL.create)