yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-27 09:25:46 +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%); 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'); const [lang] = usePersistentState('strapi-admin-language', 'en');
if (mime.includes(AssetType.Image)) { 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)) { if (mime.includes(AssetType.Video)) {
return ( return (
<video controls src={url} ref={ref}> <video controls src={url} ref={ref} {...props}>
<track label={name} default kind="captions" srcLang={lang} src="" /> <track label={name} default kind="captions" srcLang={lang} src="" />
</video> </video>
); );
@ -30,7 +30,7 @@ export const AssetPreview = forwardRef(({ mime, url, name }, ref) => {
if (mime.includes(AssetType.Audio)) { if (mime.includes(AssetType.Audio)) {
return ( return (
<audio controls src={url} ref={ref}> <audio controls src={url} ref={ref} {...props}>
{name} {name}
</audio> </audio>
); );
@ -38,14 +38,14 @@ export const AssetPreview = forwardRef(({ mime, url, name }, ref) => {
if (mime.includes('pdf')) { if (mime.includes('pdf')) {
return ( return (
<CardAsset justifyContent="center"> <CardAsset justifyContent="center" {...props}>
<FilePdfIcon aria-label={name} /> <FilePdfIcon aria-label={name} />
</CardAsset> </CardAsset>
); );
} }
return ( return (
<CardAsset justifyContent="center"> <CardAsset justifyContent="center" {...props}>
<FileIcon aria-label={name} /> <FileIcon aria-label={name} />
</CardAsset> </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 { trackUsage } = useTracking();
const previewRef = useRef(null); const previewRef = useRef(null);
const [isCropImageReady, setIsCropImageReady] = useState(false);
const [hasCropIntent, setHasCropIntent] = useState(false);
const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false)); const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false));
const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true)); const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true));
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@ -123,15 +125,23 @@ export const PreviewBox = ({
}; };
const handleCropCancel = () => { const handleCropCancel = () => {
setHasCropIntent(false);
setIsCropImageReady(false);
stopCropping(); stopCropping();
onCropCancel(); onCropCancel();
}; };
const handleCropStart = () => { const handleCropStart = () => {
crop(previewRef.current); setHasCropIntent(true);
onCropStart();
}; };
useEffect(() => {
if (hasCropIntent && isCropImageReady) {
crop(previewRef.current);
onCropStart();
}
}, [isCropImageReady, hasCropIntent, onCropStart, crop]);
return ( return (
<> <>
<RelativeBox hasRadius background="neutral150" borderColor="neutral200"> <RelativeBox hasRadius background="neutral150" borderColor="neutral200">
@ -198,7 +208,17 @@ export const PreviewBox = ({
</UploadProgressWrapper> </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> </Wrapper>
<ActionRow <ActionRow