From f8582f29163cca84670cac13ebaae3eb844e6c4c Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Thu, 17 Mar 2022 13:35:47 +0100
Subject: [PATCH 1/2] EditAssetDialog: Use original image as source for
 cropping

---
 .../PreviewBox/AssetPreview.js                | 12 ++++-----
 .../EditAssetDialog/PreviewBox/index.js       | 26 ++++++++++++++++---
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.js b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.js
index d9aac2d8e9..89ed84b9f8 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.js
@@ -13,16 +13,16 @@ const CardAsset = styled(Flex)`
   background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
 `;
 
-export const AssetPreview = forwardRef(({ mime, url, name }, ref) => {
+export const AssetPreview = forwardRef(({ mime, url, name, ...props }, ref) => {
   const [lang] = usePersistentState('strapi-admin-language', 'en');
 
   if (mime.includes(AssetType.Image)) {
-    return <img ref={ref} src={url} alt={name} />;
+    return <img ref={ref} src={url} alt={name} {...props} />;
   }
 
   if (mime.includes(AssetType.Video)) {
     return (
-      <video controls src={url} ref={ref}>
+      <video controls src={url} ref={ref} {...props}>
         <track label={name} default kind="captions" srcLang={lang} src="" />
       </video>
     );
@@ -30,7 +30,7 @@ export const AssetPreview = forwardRef(({ mime, url, name }, ref) => {
 
   if (mime.includes(AssetType.Audio)) {
     return (
-      <audio controls src={url} ref={ref}>
+      <audio controls src={url} ref={ref} {...props}>
         {name}
       </audio>
     );
@@ -38,14 +38,14 @@ export const AssetPreview = forwardRef(({ mime, url, name }, ref) => {
 
   if (mime.includes('pdf')) {
     return (
-      <CardAsset justifyContent="center">
+      <CardAsset justifyContent="center" {...props}>
         <FilePdfIcon aria-label={name} />
       </CardAsset>
     );
   }
 
   return (
-    <CardAsset justifyContent="center">
+    <CardAsset justifyContent="center" {...props}>
       <FileIcon aria-label={name} />
     </CardAsset>
   );
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
index e34cc78de1..6f7088a85a 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
@@ -41,6 +41,8 @@ export const PreviewBox = ({
 }) => {
   const { trackUsage } = useTracking();
   const previewRef = useRef(null);
+  const [cropImageReady, setCropImageReady] = useState(false);
+  const [cropIntent, setCropIntent] = useState(false);
   const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false));
   const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true));
   const { formatMessage } = useIntl();
@@ -123,15 +125,23 @@ export const PreviewBox = ({
   };
 
   const handleCropCancel = () => {
+    setCropIntent(false);
+    setCropImageReady(false);
     stopCropping();
     onCropCancel();
   };
 
   const handleCropStart = () => {
-    crop(previewRef.current);
-    onCropStart();
+    setCropIntent(true);
   };
 
+  useEffect(() => {
+    if (cropIntent && cropImageReady) {
+      crop(previewRef.current);
+      onCropStart();
+    }
+  }, [cropImageReady, cropIntent, onCropStart, crop]);
+
   return (
     <>
       <RelativeBox hasRadius background="neutral150" borderColor="neutral200">
@@ -198,7 +208,17 @@ export const PreviewBox = ({
             </UploadProgressWrapper>
           )}
 
-          <AssetPreview ref={previewRef} mime={asset.mime} name={asset.name} url={thumbnailUrl} />
+          <AssetPreview
+            ref={previewRef}
+            mime={asset.mime}
+            name={asset.name}
+            url={cropIntent ? assetUrl : thumbnailUrl}
+            onLoad={() => {
+              if (cropIntent) {
+                setCropImageReady(true);
+              }
+            }}
+          />
         </Wrapper>
 
         <ActionRow

From c3c2db1a532f3db668a6feb249d3311bcceb222d Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Tue, 22 Mar 2022 08:46:01 +0100
Subject: [PATCH 2/2] EditAssetDialog: Improve hook variable naming

---
 .../EditAssetDialog/PreviewBox/index.js       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
index 6f7088a85a..ef8260ad2c 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
@@ -41,8 +41,8 @@ export const PreviewBox = ({
 }) => {
   const { trackUsage } = useTracking();
   const previewRef = useRef(null);
-  const [cropImageReady, setCropImageReady] = useState(false);
-  const [cropIntent, setCropIntent] = useState(false);
+  const [isCropImageReady, setIsCropImageReady] = useState(false);
+  const [hasCropIntent, setHasCropIntent] = useState(false);
   const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false));
   const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true));
   const { formatMessage } = useIntl();
@@ -125,22 +125,22 @@ export const PreviewBox = ({
   };
 
   const handleCropCancel = () => {
-    setCropIntent(false);
-    setCropImageReady(false);
+    setHasCropIntent(false);
+    setIsCropImageReady(false);
     stopCropping();
     onCropCancel();
   };
 
   const handleCropStart = () => {
-    setCropIntent(true);
+    setHasCropIntent(true);
   };
 
   useEffect(() => {
-    if (cropIntent && cropImageReady) {
+    if (hasCropIntent && isCropImageReady) {
       crop(previewRef.current);
       onCropStart();
     }
-  }, [cropImageReady, cropIntent, onCropStart, crop]);
+  }, [isCropImageReady, hasCropIntent, onCropStart, crop]);
 
   return (
     <>
@@ -212,10 +212,10 @@ export const PreviewBox = ({
             ref={previewRef}
             mime={asset.mime}
             name={asset.name}
-            url={cropIntent ? assetUrl : thumbnailUrl}
+            url={hasCropIntent ? assetUrl : thumbnailUrl}
             onLoad={() => {
-              if (cropIntent) {
-                setCropImageReady(true);
+              if (hasCropIntent) {
+                setIsCropImageReady(true);
               }
             }}
           />