yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12877 from strapi/fix/upload-crop-size

Browse Source 
EditAssetDialog: Use original image as source for cropping
This commit is contained in:
Gustav Hansen 2022-03-23 14:41:29 +01:00 committed by GitHub
commit 278f401545
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -41,6 +41,8 @@ export const PreviewBox = ({
}) => {
const { trackUsage } = useTracking();
const previewRef = useRef(null);
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();
@ -123,15 +125,23 @@ export const PreviewBox = ({
};
const handleCropCancel = () => {
setHasCropIntent(false);
setIsCropImageReady(false);
stopCropping();
onCropCancel();
};
const handleCropStart = () => {
crop(previewRef.current);
onCropStart();
setHasCropIntent(true);
};
useEffect(() => {
if (hasCropIntent && isCropImageReady) {
crop(previewRef.current);
onCropStart();
}
}, [isCropImageReady, hasCropIntent, 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={hasCropIntent ? assetUrl : thumbnailUrl}
onLoad={() => {
if (hasCropIntent) {
setIsCropImageReady(true);
}
}}
/>
</Wrapper>
<ActionRow