fix(payload, ui): sends cropped image pixel values to server instead of percent values (#6903)

## Description

v2 PR [here](#6852)

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] Existing test suite passes locally with my changes

Author: PatrikKozak

packages/payload/src/uploads/cropImage.ts

@@ -6,7 +6,7 @@ export const percentToPixel = (value, dimension) => {
 
 export async function cropImage({ cropData, dimensions, file, sharp }) {
   try {
-    const { height, width, x, y } = cropData
+    const { heightPixels, widthPixels, x, y } = cropData
 
     const fileIsAnimatedType = ['image/avif', 'image/gif', 'image/webp'].includes(file.mimetype)
 
@@ -15,10 +15,10 @@ export async function cropImage({ cropData, dimensions, file, sharp }) {
     if (fileIsAnimatedType) sharpOptions.animated = true
 
     const formattedCropData = {
-      height: percentToPixel(height, dimensions.height),
+      height: Number(heightPixels),
       left: percentToPixel(x, dimensions.width),
       top: percentToPixel(y, dimensions.height),
-      width: percentToPixel(width, dimensions.width),
+      width: Number(widthPixels),
     }
 
     const cropped = sharp(file.tempFilePath || file.data, sharpOptions).extract(formattedCropData)

packages/ui/src/elements/EditUpload/index.tsx

@@ -2,7 +2,7 @@
 import type CropType from 'react-image-crop'
 
 import { useModal } from '@faceless-ui/modal'
-import React, { useRef, useState } from 'react'
+import React, { forwardRef, useRef, useState } from 'react'
 import ReactCrop from 'react-image-crop'
 import 'react-image-crop/dist/ReactCrop.css'
 
@@ -14,16 +14,28 @@ import './index.scss'
 
 const baseClass = 'edit-upload'
 
-const Input: React.FC<{ name: string; onChange: (value: string) => void; value: string }> = ({
-  name,
-  onChange,
-  value,
-}) => (
-  <div className={`${baseClass}__input`}>
-    {name}
-    <input name={name} onChange={(e) => onChange(e.target.value)} type="number" value={value} />
-  </div>
-)
+type Props = {
+  name: string
+  onChange: (value: string) => void
+  value: string
+}
+
+const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
+  const { name, onChange, value } = props
+
+  return (
+    <div className={`${baseClass}__input`}>
+      {name}
+      <input
+        name={name}
+        onChange={(e) => onChange(e.target.value)}
+        ref={ref}
+        type="number"
+        value={value}
+      />
+    </div>
+  )
+})
 
 type FocalPosition = {
   x: number
@@ -43,8 +55,10 @@ export type EditUploadProps = {
 
 const defaultCrop: CropType = {
   height: 100,
+  heightPixels: 0,
   unit: '%',
   width: 100,
+  widthPixels: 0,
   x: 0,
   y: 0,
 }
@@ -84,6 +98,17 @@ export const EditUpload: React.FC<EditUploadProps> = ({
   const imageRef = useRef<HTMLImageElement | undefined>(undefined)
   const cropRef = useRef<HTMLDivElement | undefined>(undefined)
 
+  const heightRef = useRef<HTMLInputElement | null>(null)
+  const widthRef = useRef<HTMLInputElement | null>(null)
+
+  const [imageLoaded, setImageLoaded] = useState<boolean>(false)
+
+  const onImageLoad = (e) => {
+    setOriginalHeight(e.currentTarget.naturalHeight)
+    setOriginalWidth(e.currentTarget.naturalWidth)
+    setImageLoaded(true)
+  }
+
   const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {
     const intValue = parseInt(value)
     if (dimension === 'width' && intValue >= originalWidth) return null
@@ -115,7 +140,13 @@ export const EditUpload: React.FC<EditUploadProps> = ({
   const saveEdits = () => {
     if (typeof onSave === 'function')
       onSave({
-        crop,
+        crop: crop
+          ? {
+              ...crop,
+              heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),
+              widthPixels: Number(widthRef.current?.value ?? crop.widthPixels),
+            }
+          : undefined,
         focalPosition,
       })
     closeModal(editDrawerSlug)
@@ -159,6 +190,7 @@ export const EditUpload: React.FC<EditUploadProps> = ({
             aria-label={t('general:applyChanges')}
             buttonStyle="primary"
             className={`${baseClass}__save`}
+            disabled={!imageLoaded}
             onClick={saveEdits}
           >
             {t('general:applyChanges')}
@@ -186,21 +218,15 @@ export const EditUpload: React.FC<EditUploadProps> = ({
               >
                 <img
                   alt={t('upload:setCropArea')}
-                  onLoad={(e) => {
-                    setOriginalHeight(e.currentTarget.naturalHeight)
-                    setOriginalWidth(e.currentTarget.naturalWidth)
-                  }}
+                  onLoad={onImageLoad}
                   ref={imageRef}
                   src={fileSrcToUse}
                 />
               </ReactCrop>
             ) : (
               <img
                 alt={t('upload:setFocalPoint')}
-                onLoad={(e) => {
-                  setOriginalHeight(e.currentTarget.naturalHeight)
-                  setOriginalWidth(e.currentTarget.naturalWidth)
-                }}
+                onLoad={onImageLoad}
                 ref={imageRef}
                 src={fileSrcToUse}
               />
@@ -233,8 +259,10 @@ export const EditUpload: React.FC<EditUploadProps> = ({
                       onClick={() =>
                         setCrop({
                           height: 100,
+                          heightPixels: originalHeight,
                           unit: '%',
                           width: 100,
+                          widthPixels: originalWidth,
                           x: 0,
                           y: 0,
                         })
@@ -251,11 +279,13 @@ export const EditUpload: React.FC<EditUploadProps> = ({
                   <Input
                     name={`${t('upload:width')} (px)`}
                     onChange={(value) => fineTuneCrop({ dimension: 'width', value })}
+                    ref={widthRef}
                     value={((crop.width / 100) * originalWidth).toFixed(0)}
                   />
                   <Input
                     name={`${t('upload:height')} (px)`}
                     onChange={(value) => fineTuneCrop({ dimension: 'height', value })}
+                    ref={heightRef}
                     value={((crop.height / 100) * originalHeight).toFixed(0)}
                   />
                 </div>