yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-21 22:40:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix unable to download original image in uploader

Browse Source 
Signed-off-by: harimkims <harimkims@gmail.com>
This commit is contained in:
harimkims 2021-12-03 04:11:44 +09:00
parent 2b635fe656
commit 2461a73a6c
4 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/upload/admin/src/components/AssetCard/AssetCard.js
View File

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

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

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

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

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

11
packages/core/upload/admin/src/utils/createAssetUrl.js
View File

@ -1,11 +1,18 @@
import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin'; 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) { if (asset.isLocal) {
return asset.url; 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); const backendUrl = prefixFileUrlWithBackendUrl(assetUrl);
return `${backendUrl}?updated_at=${asset.updatedAt}`; return `${backendUrl}?updated_at=${asset.updatedAt}`;