fix: handle withoutEnlargement for undefined height or width (#10078)

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

-->

### What?

This patch implements the functionality in `imageResizer` to omit the
generation of the image when either width or height is undefined and
`withoutEnlargement` is set to `undefined`

### Why?

#9986: `withoutEnlargement` doesn't work when `height` is undefined in
`upload.imageSizes`

### How?

This code checks if `withoutEnlargement` is undefined and either
`targetWidth` or `targetHeight` is missing. If so, it further checks
whether the target dimensions (if provided) are larger than the original
image dimensions. If the target would enlarge the image, it returns
'omit', skipping the resizing to prevent enlargement

Fixes #9986

---------

Co-authored-by: Patrik Kozak <patrik@payloadcms.com>
This commit is contained in:
bakaptr
2025-01-06 23:50:44 +08:00
committed by GitHub
parent 1525cc6e3a
commit d2127335b9
4 changed files with 61 additions and 0 deletions

View File

@@ -176,6 +176,15 @@ const getImageResizeAction = ({
}
}
if (withoutEnlargement === undefined && (!targetWidth || !targetHeight)) {
if (
(targetWidth && originalImage.width < targetWidth) ||
(targetHeight && originalImage.height < targetHeight)
) {
return 'omit'
}
}
const originalImageIsSmallerXOrY =
originalImage.width < targetWidth || originalImage.height < targetHeight
if (fit === 'contain' || fit === 'inside') {

View File

@@ -456,6 +456,12 @@ export default buildConfigWithDefaults({
height: 300,
width: 300,
},
{
name: 'undefinedHeightWithoutEnlargement',
width: 4000,
height: undefined,
withoutEnlargement: undefined,
},
],
mimeTypes: [
'image/png',

View File

@@ -740,6 +740,34 @@ describe('Collections - Uploads', () => {
expect(sizes.accidentalSameSize.mimeType).toBe('image/png')
expect(sizes.accidentalSameSize.filename).toBe('small-320x80.png')
})
it('should not enlarge image if `withoutEnlargement` is set to undefined and width or height is undefined when imageSizes are larger than the uploaded image', async () => {
const small = await getFileByPath(path.resolve(dirname, './small.png'))
const result = await payload.create({
collection: enlargeSlug,
data: {},
file: small,
})
expect(result).toBeTruthy()
const { sizes } = result as unknown as Enlarge
expect(sizes.undefinedHeightWithoutEnlargement).toMatchObject({
filename: null,
filesize: null,
height: null,
mimeType: null,
url: null,
width: null,
})
await payload.delete({
collection: enlargeSlug,
id: result.id,
})
})
})
describe('Required Files', () => {

View File

@@ -744,6 +744,14 @@ export interface Enlarge {
filesize?: number | null;
filename?: string | null;
};
undefinedHeightWithoutEnlargement?: {
url?: string | null;
width?: number | null;
height?: number | null;
mimeType?: string | null;
filesize?: number | null;
filename?: string | null;
};
};
}
/**
@@ -2009,6 +2017,16 @@ export interface EnlargeSelect<T extends boolean = true> {
filesize?: T;
filename?: T;
};
undefinedHeightWithoutEnlargement?:
| T
| {
url?: T;
width?: T;
height?: T;
mimeType?: T;
filesize?: T;
filename?: T;
};
};
}
/**