diff --git a/packages/payload/src/uploads/imageResizer.ts b/packages/payload/src/uploads/imageResizer.ts index cc91694958..8bd2682a7a 100644 --- a/packages/payload/src/uploads/imageResizer.ts +++ b/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) { diff --git a/test/uploads/e2e.spec.ts b/test/uploads/e2e.spec.ts index 60eb1ec888..9541748e55 100644 --- a/test/uploads/e2e.spec.ts +++ b/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) diff --git a/test/uploads/ios-image.jpeg b/test/uploads/ios-image.jpeg new file mode 100644 index 0000000000..59cbb094f2 Binary files /dev/null and b/test/uploads/ios-image.jpeg differ