yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-07 13:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11769 from iicdii/fix/11768

Browse Source 
Fix unable to download original image in uploader
This commit is contained in:
Alexandre BODIN 2021-12-14 13:47:39 +01:00 committed by GitHub
commit 6f0458590f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 23 additions and 10 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}
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}

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

@ -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

2
packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js
View File

@ -201,7 +201,7 @@ describe('<EditAssetDialog />', () => {
fireEvent.click(screen.getByLabelText('Download'));
expect(downloadFile).toHaveBeenCalledWith(
'http://localhost:1337/uploads/thumbnail_Screenshot_2_5d4a574d61.png?updated_at=2021-10-04T09:42:31.670Z',
'http://localhost:1337/uploads/Screenshot_2_5d4a574d61.png?updated_at=2021-10-04T09:42:31.670Z',
'Screenshot 2.png'
);
});

2
packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
View File

@ -156,7 +156,7 @@ describe('<EditAssetDialog />', () => {
fireEvent.click(screen.getByLabelText('Download'));
expect(downloadFile).toHaveBeenCalledWith(
'http://localhost:1337/uploads/thumbnail_Screenshot_2_5d4a574d61.png?updated_at=2021-10-04T09:42:31.670Z',
'http://localhost:1337/uploads/Screenshot_2_5d4a574d61.png?updated_at=2021-10-04T09:42:31.670Z',
'Screenshot 2.png'
);
});

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

@ -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}
/>
);

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

@ -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}`;