diff --git a/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx b/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx index c6a91904c8..64d988e163 100644 --- a/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx +++ b/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx @@ -116,10 +116,12 @@ export const Upload: React.FC = (props) => { const hasImageSizes = collection?.upload?.imageSizes?.length > 0 const hasResizeOptions = Boolean(collection?.upload?.resizeOptions) + // Explicitly check if set to true, default is undefined + const focalPointEnabled = collection?.upload?.focalPoint === true const { collection: { upload: { crop: showCrop = true, focalPoint = true } } = {} } = props - const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions) + const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled) const lastSubmittedTime = submitted ? new Date().toISOString() : null diff --git a/packages/payload/src/uploads/generateFileData.ts b/packages/payload/src/uploads/generateFileData.ts index f43f85a6ad..a9ebf1a091 100644 --- a/packages/payload/src/uploads/generateFileData.ts +++ b/packages/payload/src/uploads/generateFileData.ts @@ -66,8 +66,15 @@ export const generateFileData = async ({ req, }) - const { disableLocalStorage, formatOptions, imageSizes, resizeOptions, staticDir, trimOptions } = - collectionConfig.upload + const { + disableLocalStorage, + focalPoint: focalPointEnabled, + formatOptions, + imageSizes, + resizeOptions, + staticDir, + trimOptions, + } = collectionConfig.upload let staticPath = staticDir if (staticDir.indexOf('/') !== 0) { @@ -244,7 +251,7 @@ export const generateFileData = async ({ } } - if (Array.isArray(imageSizes) && fileSupportsResize) { + if (fileSupportsResize && (Array.isArray(imageSizes) || focalPointEnabled !== false)) { req.payloadUploadSizes = {} const { focalPoint, sizeData, sizesToSave } = await resizeAndTransformImageSizes({ config: collectionConfig, diff --git a/packages/payload/src/uploads/getBaseFields.ts b/packages/payload/src/uploads/getBaseFields.ts index ede2384e73..dabfd192d4 100644 --- a/packages/payload/src/uploads/getBaseFields.ts +++ b/packages/payload/src/uploads/getBaseFields.ts @@ -117,8 +117,9 @@ const getBaseUploadFields = ({ collection, config }: Options): Field[] => { // Add focal point fields if not disabled if ( - uploadOptions.focalPoint !== false && - (uploadOptions.imageSizes || uploadOptions.resizeOptions) + uploadOptions.focalPoint !== false || + uploadOptions.imageSizes || + uploadOptions.resizeOptions ) { uploadFields = uploadFields.concat( ['focalX', 'focalY'].map((name) => { diff --git a/packages/payload/src/uploads/imageResizer.ts b/packages/payload/src/uploads/imageResizer.ts index 788489e1ef..251c26c1d5 100644 --- a/packages/payload/src/uploads/imageResizer.ts +++ b/packages/payload/src/uploads/imageResizer.ts @@ -235,11 +235,6 @@ export default async function resizeAndTransformImageSizes({ }: ResizeArgs): Promise { const { focalPoint: focalPointEnabled = true, imageSizes } = config.upload - // Noting to resize here so return as early as possible - if (!imageSizes) return { sizeData: {}, sizesToSave: [] } - - const sharpBase = sharp(file.tempFilePath || file.data).rotate() // pass rotate() to auto-rotate based on EXIF data. https://github.com/payloadcms/payload/pull/3081 - // Focal point adjustments const incomingFocalPoint = uploadEdits.focalPoint ? { @@ -248,6 +243,17 @@ export default async function resizeAndTransformImageSizes({ } : undefined + const defaultResult: ImageSizesResult = { + ...(focalPointEnabled && incomingFocalPoint && { focalPoint: incomingFocalPoint }), + sizeData: {}, + sizesToSave: [], + } + + // Nothing to resize here so return as early as possible + if (!imageSizes) return defaultResult + + const sharpBase = sharp(file.tempFilePath || file.data).rotate() // pass rotate() to auto-rotate based on EXIF data. https://github.com/payloadcms/payload/pull/3081 + const results: ImageSizesResult[] = await Promise.all( imageSizes.map(async (imageResizeConfig): Promise => { imageResizeConfig = sanitizeResizeConfig(imageResizeConfig) @@ -352,16 +358,9 @@ export default async function resizeAndTransformImageSizes({ }), ) - return results.reduce( - (acc, result) => { - Object.assign(acc.sizeData, result.sizeData) - acc.sizesToSave.push(...result.sizesToSave) - return acc - }, - { - ...(focalPointEnabled && incomingFocalPoint && { focalPoint: incomingFocalPoint }), - sizeData: {}, - sizesToSave: [], - }, - ) + return results.reduce((acc, result) => { + Object.assign(acc.sizeData, result.sizeData) + acc.sizesToSave.push(...result.sizesToSave) + return acc + }, defaultResult) } diff --git a/test/uploads/config.ts b/test/uploads/config.ts index c94243aec2..a0a34886d8 100644 --- a/test/uploads/config.ts +++ b/test/uploads/config.ts @@ -198,6 +198,17 @@ export default buildConfigWithDefaults({ staticURL: '/focal-only', }, }, + { + slug: 'focal-no-sizes', + fields: [], + upload: { + crop: false, + focalPoint: true, + mimeTypes: ['image/png', 'image/jpg', 'image/jpeg'], + staticDir: './focal-no-sizes', + staticURL: '/focal-no-sizes', + }, + }, { slug: mediaSlug, fields: [],