Fix unable to download original image in uploader

Signed-off-by: harimkims <harimkims@gmail.com>

packages/core/upload/admin/src/components/AssetCard/AssetCard.js

@@ -27,7 +27,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s
         key={asset.id}
         name={asset.name}
         extension={getFileExtension(asset.ext)}
-        url={local ? asset.url : createAssetUrl(asset)}
+        url={local ? asset.url : createAssetUrl(asset, true)}
         mime={asset.mime}
         onEdit={onEdit ? () => onEdit(asset) : undefined}
         onSelect={handleSelect}

packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js

@@ -41,7 +41,8 @@ export const PreviewBox = ({
 }) => {
   const { trackUsage } = useTracking();
   const previewRef = useRef(null);
-  const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset));
+  const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false));
+  const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true));
   const { formatMessage } = useIntl();
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const {
@@ -73,6 +74,7 @@ export const PreviewBox = ({
         asset.url = fileLocalUrl;
       }
       setAssetUrl(fileLocalUrl);
+      setThumbnailUrl(fileLocalUrl);
     }
   }, [replacementFile, asset]);
 
@@ -83,16 +85,19 @@ export const PreviewBox = ({
     // Making sure that when persisting the new asset, the URL changes with width and height
     // So that the browser makes a request and handle the image caching correctly at the good size
     let optimizedCachingImage;
+    let optimizedCachingThumbnailImage;
 
     if (asset.isLocal) {
       optimizedCachingImage = URL.createObjectURL(file);
+      optimizedCachingThumbnailImage = optimizedCachingImage;
       asset.url = optimizedCachingImage;
       asset.rawFile = file;
 
       trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation });
     } else {
       const updatedAsset = await editAsset(nextAsset, file);
-      optimizedCachingImage = createAssetUrl(updatedAsset);
+      optimizedCachingImage = createAssetUrl(updatedAsset, false);
+      optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);
 
       trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation });
     }
@@ -100,6 +105,7 @@ export const PreviewBox = ({
     stopCropping();
     onCropCancel();
     setAssetUrl(optimizedCachingImage);
+    setThumbnailUrl(optimizedCachingThumbnailImage);
   };
 
   const isInCroppingMode = isCropping && !isLoading;
@@ -192,7 +198,7 @@ export const PreviewBox = ({
             </UploadProgressWrapper>
           )}
 
-          <AssetPreview ref={previewRef} mime={asset.mime} name={asset.name} url={assetUrl} />
+          <AssetPreview ref={previewRef} mime={asset.mime} name={asset.name} url={thumbnailUrl} />
         </Wrapper>
 
         <ActionRow

packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.js

@@ -25,7 +25,7 @@ export const CarouselAsset = ({ asset }) => {
     return (
       <VideoPreviewWrapper height="100%">
         <VideoPreview
-          url={createAssetUrl(asset)}
+          url={createAssetUrl(asset, true)}
           mime={asset.mime}
           alt={asset.alternativeText || asset.name}
         />
@@ -39,7 +39,7 @@ export const CarouselAsset = ({ asset }) => {
         as="img"
         maxHeight="100%"
         maxWidth="100%"
-        src={createAssetUrl(asset)}
+        src={createAssetUrl(asset, true)}
         alt={asset.alternativeText || asset.name}
       />
     );

packages/core/upload/admin/src/utils/createAssetUrl.js

@@ -1,11 +1,18 @@
 import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
 
-export const createAssetUrl = asset => {
+/**
+ * Create image URL for asset
+ * @param {Object} asset
+ * @param {Boolean} forThumbnail - if true, return URL for thumbnail
+ * if there's no thumbnail, return the URL of the original image.
+ * @return {String} URL
+ */
+export const createAssetUrl = (asset, forThumbnail = true) => {
   if (asset.isLocal) {
     return asset.url;
   }
 
-  const assetUrl = asset?.formats?.thumbnail?.url || asset.url;
+  const assetUrl = forThumbnail ? asset?.formats?.thumbnail?.url || asset.url : asset.url;
   const backendUrl = prefixFileUrlWithBackendUrl(assetUrl);
 
   return `${backendUrl}?updated_at=${asset.updatedAt}`;