npm - @strapi/upload - Versions diffs - 5.42.0 → 5.43.0 - Mend

@strapi/upload 5.42.0 → 5.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/dist/admin/components/AssetCard/UploadingAssetCard.js CHANGED Viewed

@@ -142,7 +142,7 @@ const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploadedFiles,
                     defaultMessage: error.message
                 } : {
                     id: getTrad.getTrad('upload.generic-error'),
-                    defaultMessage: 'An error occured while uploading the file.'
+                    defaultMessage: 'An error occurred while uploading the file.'
                 })
             }) : undefined
         ]

package/dist/admin/components/AssetCard/UploadingAssetCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadingAssetCard.js","sources":["../../../../admin/src/components/AssetCard/UploadingAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Box,\n Card,\n CardBadge,\n CardBody,\n CardContent,\n CardHeader,\n CardSubtitle,\n CardTitle,\n Flex,\n Typography,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../enums';\nimport { useUpload } from '../../hooks/useUpload';\nimport { getTrad } from '../../utils';\nimport { UploadProgress } from '../UploadProgress/UploadProgress';\n\nimport type { RawFile, File } from '../../../../shared/contracts/files';\n\nconst UploadProgressWrapper = styled.div`\n height: 8.8rem;\n width: 100%;\n`;\n\nconst Extension = styled.span`\n text-transform: uppercase;\n`;\n\ninterface UploadingAssetCardProps {\n onCancel: (rawFile: RawFile) => void;\n onStatusChange: (status: string) => void;\n addUploadedFiles: (files: File[]) => void;\n folderId?: string \| number \| null;\n asset: Asset;\n id?: string;\n size?: 'S' \| 'M';\n}\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\nexport const UploadingAssetCard = ({\n asset,\n onCancel,\n onStatusChange,\n addUploadedFiles,\n folderId = null,\n}: UploadingAssetCardProps) => {\n const { upload, cancel, error, progress, status } = useUpload();\n const { formatMessage } = useIntl();\n\n let badgeContent = formatMessage({\n id: getTrad('settings.section.doc.label'),\n defaultMessage: 'Doc',\n });\n\n if (asset.type === AssetType.Image) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.image.label'),\n defaultMessage: 'Image',\n });\n } else if (asset.type === AssetType.Video) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.video.label'),\n defaultMessage: 'Video',\n });\n } else if (asset.type === AssetType.Audio) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.audio.label'),\n defaultMessage: 'Audio',\n });\n }\n\n React.useEffect(() => {\n const uploadFile = async () => {\n const files = await upload(asset, folderId ? Number(folderId) : null);\n\n if (addUploadedFiles) {\n addUploadedFiles(files);\n }\n };\n\n uploadFile();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.useEffect(() => {\n onStatusChange(status);\n }, [status, onStatusChange]);\n\n const handleCancel = () => {\n cancel();\n onCancel(asset.rawFile!);\n };\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Card borderColor={error ? 'danger600' : 'neutral150'}>\n <CardHeader>\n <UploadProgressWrapper>\n <UploadProgress\n error={error \|\| undefined}\n onCancel={handleCancel}\n progress={progress}\n />\n </UploadProgressWrapper>\n </CardHeader>\n <CardBody>\n <CardContent>\n <Box paddingTop={1}>\n <Typography tag=\"h2\">\n <CardTitle tag=\"span\">{asset.name}</CardTitle>\n </Typography>\n </Box>\n <CardSubtitle>\n <Extension>{asset.ext}</Extension>\n </CardSubtitle>\n </CardContent>\n <Flex paddingTop={1} grow={1}>\n <CardBadge>{badgeContent}</CardBadge>\n </Flex>\n </CardBody>\n </Card>\n {error ? (\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"danger600\">\n {formatMessage(\n error?.message\n ? {\n id: getTrad(`apiError.${error.message}`),\n defaultMessage: error.message,\n /* See issue: https://github.com/strapi/strapi/issues/13867\n A proxy might return an error, before the request reaches Strapi\n and therefore we need to handle errors gracefully.\n */\n }\n : {\n id: getTrad('upload.generic-error'),\n defaultMessage: 'An error ~~occured~~ while uploading the file.',\n }\n )}\n </Typography>\n ) : undefined}\n </Flex>\n );\n};\n"],"names":["UploadProgressWrapper","styled","div","Extension","span","UploadingAssetCard","asset","onCancel","onStatusChange","addUploadedFiles","folderId","upload","cancel","error","progress","status","useUpload","formatMessage","useIntl","badgeContent","id","getTrad","defaultMessage","type","AssetType","Image","Video","Audio","React","useEffect","uploadFile","files","Number","handleCancel","rawFile","_jsxs","Flex","direction","alignItems","gap","Card","borderColor","_jsx","CardHeader","UploadProgress","undefined","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","name","CardSubtitle","ext","grow","CardBadge","variant","fontWeight","textColor","message"],"mappings":"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"}
1	+ {"version":3,"file":"UploadingAssetCard.js","sources":["../../../../admin/src/components/AssetCard/UploadingAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Box,\n Card,\n CardBadge,\n CardBody,\n CardContent,\n CardHeader,\n CardSubtitle,\n CardTitle,\n Flex,\n Typography,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../enums';\nimport { useUpload } from '../../hooks/useUpload';\nimport { getTrad } from '../../utils';\nimport { UploadProgress } from '../UploadProgress/UploadProgress';\n\nimport type { RawFile, File } from '../../../../shared/contracts/files';\n\nconst UploadProgressWrapper = styled.div`\n height: 8.8rem;\n width: 100%;\n`;\n\nconst Extension = styled.span`\n text-transform: uppercase;\n`;\n\ninterface UploadingAssetCardProps {\n onCancel: (rawFile: RawFile) => void;\n onStatusChange: (status: string) => void;\n addUploadedFiles: (files: File[]) => void;\n folderId?: string \| number \| null;\n asset: Asset;\n id?: string;\n size?: 'S' \| 'M';\n}\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\nexport const UploadingAssetCard = ({\n asset,\n onCancel,\n onStatusChange,\n addUploadedFiles,\n folderId = null,\n}: UploadingAssetCardProps) => {\n const { upload, cancel, error, progress, status } = useUpload();\n const { formatMessage } = useIntl();\n\n let badgeContent = formatMessage({\n id: getTrad('settings.section.doc.label'),\n defaultMessage: 'Doc',\n });\n\n if (asset.type === AssetType.Image) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.image.label'),\n defaultMessage: 'Image',\n });\n } else if (asset.type === AssetType.Video) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.video.label'),\n defaultMessage: 'Video',\n });\n } else if (asset.type === AssetType.Audio) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.audio.label'),\n defaultMessage: 'Audio',\n });\n }\n\n React.useEffect(() => {\n const uploadFile = async () => {\n const files = await upload(asset, folderId ? Number(folderId) : null);\n\n if (addUploadedFiles) {\n addUploadedFiles(files);\n }\n };\n\n uploadFile();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.useEffect(() => {\n onStatusChange(status);\n }, [status, onStatusChange]);\n\n const handleCancel = () => {\n cancel();\n onCancel(asset.rawFile!);\n };\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Card borderColor={error ? 'danger600' : 'neutral150'}>\n <CardHeader>\n <UploadProgressWrapper>\n <UploadProgress\n error={error \|\| undefined}\n onCancel={handleCancel}\n progress={progress}\n />\n </UploadProgressWrapper>\n </CardHeader>\n <CardBody>\n <CardContent>\n <Box paddingTop={1}>\n <Typography tag=\"h2\">\n <CardTitle tag=\"span\">{asset.name}</CardTitle>\n </Typography>\n </Box>\n <CardSubtitle>\n <Extension>{asset.ext}</Extension>\n </CardSubtitle>\n </CardContent>\n <Flex paddingTop={1} grow={1}>\n <CardBadge>{badgeContent}</CardBadge>\n </Flex>\n </CardBody>\n </Card>\n {error ? (\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"danger600\">\n {formatMessage(\n error?.message\n ? {\n id: getTrad(`apiError.${error.message}`),\n defaultMessage: error.message,\n /* See issue: https://github.com/strapi/strapi/issues/13867\n A proxy might return an error, before the request reaches Strapi\n and therefore we need to handle errors gracefully.\n */\n }\n : {\n id: getTrad('upload.generic-error'),\n defaultMessage: 'An error occurred while uploading the file.',\n }\n )}\n </Typography>\n ) : undefined}\n </Flex>\n );\n};\n"],"names":["UploadProgressWrapper","styled","div","Extension","span","UploadingAssetCard","asset","onCancel","onStatusChange","addUploadedFiles","folderId","upload","cancel","error","progress","status","useUpload","formatMessage","useIntl","badgeContent","id","getTrad","defaultMessage","type","AssetType","Image","Video","Audio","React","useEffect","uploadFile","files","Number","handleCancel","rawFile","_jsxs","Flex","direction","alignItems","gap","Card","borderColor","_jsx","CardHeader","UploadProgress","undefined","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","name","CardSubtitle","ext","grow","CardBadge","variant","fontWeight","textColor","message"],"mappings":"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"}

package/dist/admin/components/AssetCard/UploadingAssetCard.mjs CHANGED Viewed

@@ -121,7 +121,7 @@ const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploadedFiles,
                     defaultMessage: error.message
                 } : {
                     id: getTrad('upload.generic-error'),
-                    defaultMessage: 'An error occured while uploading the file.'
+                    defaultMessage: 'An error occurred while uploading the file.'
                 })
             }) : undefined
         ]

package/dist/admin/components/AssetCard/UploadingAssetCard.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadingAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/UploadingAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Box,\n Card,\n CardBadge,\n CardBody,\n CardContent,\n CardHeader,\n CardSubtitle,\n CardTitle,\n Flex,\n Typography,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../enums';\nimport { useUpload } from '../../hooks/useUpload';\nimport { getTrad } from '../../utils';\nimport { UploadProgress } from '../UploadProgress/UploadProgress';\n\nimport type { RawFile, File } from '../../../../shared/contracts/files';\n\nconst UploadProgressWrapper = styled.div`\n height: 8.8rem;\n width: 100%;\n`;\n\nconst Extension = styled.span`\n text-transform: uppercase;\n`;\n\ninterface UploadingAssetCardProps {\n onCancel: (rawFile: RawFile) => void;\n onStatusChange: (status: string) => void;\n addUploadedFiles: (files: File[]) => void;\n folderId?: string \| number \| null;\n asset: Asset;\n id?: string;\n size?: 'S' \| 'M';\n}\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\nexport const UploadingAssetCard = ({\n asset,\n onCancel,\n onStatusChange,\n addUploadedFiles,\n folderId = null,\n}: UploadingAssetCardProps) => {\n const { upload, cancel, error, progress, status } = useUpload();\n const { formatMessage } = useIntl();\n\n let badgeContent = formatMessage({\n id: getTrad('settings.section.doc.label'),\n defaultMessage: 'Doc',\n });\n\n if (asset.type === AssetType.Image) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.image.label'),\n defaultMessage: 'Image',\n });\n } else if (asset.type === AssetType.Video) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.video.label'),\n defaultMessage: 'Video',\n });\n } else if (asset.type === AssetType.Audio) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.audio.label'),\n defaultMessage: 'Audio',\n });\n }\n\n React.useEffect(() => {\n const uploadFile = async () => {\n const files = await upload(asset, folderId ? Number(folderId) : null);\n\n if (addUploadedFiles) {\n addUploadedFiles(files);\n }\n };\n\n uploadFile();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.useEffect(() => {\n onStatusChange(status);\n }, [status, onStatusChange]);\n\n const handleCancel = () => {\n cancel();\n onCancel(asset.rawFile!);\n };\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Card borderColor={error ? 'danger600' : 'neutral150'}>\n <CardHeader>\n <UploadProgressWrapper>\n <UploadProgress\n error={error \|\| undefined}\n onCancel={handleCancel}\n progress={progress}\n />\n </UploadProgressWrapper>\n </CardHeader>\n <CardBody>\n <CardContent>\n <Box paddingTop={1}>\n <Typography tag=\"h2\">\n <CardTitle tag=\"span\">{asset.name}</CardTitle>\n </Typography>\n </Box>\n <CardSubtitle>\n <Extension>{asset.ext}</Extension>\n </CardSubtitle>\n </CardContent>\n <Flex paddingTop={1} grow={1}>\n <CardBadge>{badgeContent}</CardBadge>\n </Flex>\n </CardBody>\n </Card>\n {error ? (\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"danger600\">\n {formatMessage(\n error?.message\n ? {\n id: getTrad(`apiError.${error.message}`),\n defaultMessage: error.message,\n /* See issue: https://github.com/strapi/strapi/issues/13867\n A proxy might return an error, before the request reaches Strapi\n and therefore we need to handle errors gracefully.\n */\n }\n : {\n id: getTrad('upload.generic-error'),\n defaultMessage: 'An error ~~occured~~ while uploading the file.',\n }\n )}\n </Typography>\n ) : undefined}\n </Flex>\n );\n};\n"],"names":["UploadProgressWrapper","styled","div","Extension","span","UploadingAssetCard","asset","onCancel","onStatusChange","addUploadedFiles","folderId","upload","cancel","error","progress","status","useUpload","formatMessage","useIntl","badgeContent","id","getTrad","defaultMessage","type","AssetType","Image","Video","Audio","React","useEffect","uploadFile","files","Number","handleCancel","rawFile","_jsxs","Flex","direction","alignItems","gap","Card","borderColor","_jsx","CardHeader","UploadProgress","undefined","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","name","CardSubtitle","ext","grow","CardBadge","variant","fontWeight","textColor","message"],"mappings":"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"}
1	+ {"version":3,"file":"UploadingAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/UploadingAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Box,\n Card,\n CardBadge,\n CardBody,\n CardContent,\n CardHeader,\n CardSubtitle,\n CardTitle,\n Flex,\n Typography,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../enums';\nimport { useUpload } from '../../hooks/useUpload';\nimport { getTrad } from '../../utils';\nimport { UploadProgress } from '../UploadProgress/UploadProgress';\n\nimport type { RawFile, File } from '../../../../shared/contracts/files';\n\nconst UploadProgressWrapper = styled.div`\n height: 8.8rem;\n width: 100%;\n`;\n\nconst Extension = styled.span`\n text-transform: uppercase;\n`;\n\ninterface UploadingAssetCardProps {\n onCancel: (rawFile: RawFile) => void;\n onStatusChange: (status: string) => void;\n addUploadedFiles: (files: File[]) => void;\n folderId?: string \| number \| null;\n asset: Asset;\n id?: string;\n size?: 'S' \| 'M';\n}\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\nexport const UploadingAssetCard = ({\n asset,\n onCancel,\n onStatusChange,\n addUploadedFiles,\n folderId = null,\n}: UploadingAssetCardProps) => {\n const { upload, cancel, error, progress, status } = useUpload();\n const { formatMessage } = useIntl();\n\n let badgeContent = formatMessage({\n id: getTrad('settings.section.doc.label'),\n defaultMessage: 'Doc',\n });\n\n if (asset.type === AssetType.Image) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.image.label'),\n defaultMessage: 'Image',\n });\n } else if (asset.type === AssetType.Video) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.video.label'),\n defaultMessage: 'Video',\n });\n } else if (asset.type === AssetType.Audio) {\n badgeContent = formatMessage({\n id: getTrad('settings.section.audio.label'),\n defaultMessage: 'Audio',\n });\n }\n\n React.useEffect(() => {\n const uploadFile = async () => {\n const files = await upload(asset, folderId ? Number(folderId) : null);\n\n if (addUploadedFiles) {\n addUploadedFiles(files);\n }\n };\n\n uploadFile();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.useEffect(() => {\n onStatusChange(status);\n }, [status, onStatusChange]);\n\n const handleCancel = () => {\n cancel();\n onCancel(asset.rawFile!);\n };\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Card borderColor={error ? 'danger600' : 'neutral150'}>\n <CardHeader>\n <UploadProgressWrapper>\n <UploadProgress\n error={error \|\| undefined}\n onCancel={handleCancel}\n progress={progress}\n />\n </UploadProgressWrapper>\n </CardHeader>\n <CardBody>\n <CardContent>\n <Box paddingTop={1}>\n <Typography tag=\"h2\">\n <CardTitle tag=\"span\">{asset.name}</CardTitle>\n </Typography>\n </Box>\n <CardSubtitle>\n <Extension>{asset.ext}</Extension>\n </CardSubtitle>\n </CardContent>\n <Flex paddingTop={1} grow={1}>\n <CardBadge>{badgeContent}</CardBadge>\n </Flex>\n </CardBody>\n </Card>\n {error ? (\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"danger600\">\n {formatMessage(\n error?.message\n ? {\n id: getTrad(`apiError.${error.message}`),\n defaultMessage: error.message,\n /* See issue: https://github.com/strapi/strapi/issues/13867\n A proxy might return an error, before the request reaches Strapi\n and therefore we need to handle errors gracefully.\n */\n }\n : {\n id: getTrad('upload.generic-error'),\n defaultMessage: 'An error occurred while uploading the file.',\n }\n )}\n </Typography>\n ) : undefined}\n </Flex>\n );\n};\n"],"names":["UploadProgressWrapper","styled","div","Extension","span","UploadingAssetCard","asset","onCancel","onStatusChange","addUploadedFiles","folderId","upload","cancel","error","progress","status","useUpload","formatMessage","useIntl","badgeContent","id","getTrad","defaultMessage","type","AssetType","Image","Video","Audio","React","useEffect","uploadFile","files","Number","handleCancel","rawFile","_jsxs","Flex","direction","alignItems","gap","Card","borderColor","_jsx","CardHeader","UploadProgress","undefined","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","name","CardSubtitle","ext","grow","CardBadge","variant","fontWeight","textColor","message"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAMA,qBAAAA,GAAwBC,MAAAA,CAAOC,GAAG;;;AAGxC,CAAC;AAED,MAAMC,SAAAA,GAAYF,MAAAA,CAAOG,IAAI;;AAE7B,CAAC;AAiBM,MAAMC,kBAAAA,GAAqB,CAAC,EACjCC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACdC,gBAAgB,EAChBC,QAAAA,GAAW,IAAI,EACS,GAAA;IACxB,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGC,SAAAA,EAAAA;IACpD,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,IAAIC,eAAeF,aAAAA,CAAc;AAC/BG,QAAAA,EAAAA,EAAIC,OAAAA,CAAQ,4BAAA,CAAA;QACZC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEA,IAAA,IAAIhB,KAAAA,CAAMiB,IAAI,KAAKC,SAAAA,CAAUC,KAAK,EAAE;AAClCN,QAAAA,YAAAA,GAAeF,aAAAA,CAAc;AAC3BG,YAAAA,EAAAA,EAAIC,OAAAA,CAAQ,8BAAA,CAAA;YACZC,cAAAA,EAAgB;AAClB,SAAA,CAAA;AACF,IAAA,CAAA,MAAO,IAAIhB,KAAAA,CAAMiB,IAAI,KAAKC,SAAAA,CAAUE,KAAK,EAAE;AACzCP,QAAAA,YAAAA,GAAeF,aAAAA,CAAc;AAC3BG,YAAAA,EAAAA,EAAIC,OAAAA,CAAQ,8BAAA,CAAA;YACZC,cAAAA,EAAgB;AAClB,SAAA,CAAA;AACF,IAAA,CAAA,MAAO,IAAIhB,KAAAA,CAAMiB,IAAI,KAAKC,SAAAA,CAAUG,KAAK,EAAE;AACzCR,QAAAA,YAAAA,GAAeF,aAAAA,CAAc;AAC3BG,YAAAA,EAAAA,EAAIC,OAAAA,CAAQ,8BAAA,CAAA;YACZC,cAAAA,EAAgB;AAClB,SAAA,CAAA;AACF,IAAA;AAEAM,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,MAAMC,UAAAA,GAAa,UAAA;AACjB,YAAA,MAAMC,QAAQ,MAAMpB,MAAAA,CAAOL,KAAAA,EAAOI,QAAAA,GAAWsB,OAAOtB,QAAAA,CAAAA,GAAY,IAAA,CAAA;AAEhE,YAAA,IAAID,gBAAAA,EAAkB;gBACpBA,gBAAAA,CAAiBsB,KAAAA,CAAAA;AACnB,YAAA;AACF,QAAA,CAAA;AAEAD,QAAAA,UAAAA,EAAAA;;AAEF,IAAA,CAAA,EAAG,EAAE,CAAA;AAELF,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;QACdrB,cAAAA,CAAeO,MAAAA,CAAAA;IACjB,CAAA,EAAG;AAACA,QAAAA,MAAAA;AAAQP,QAAAA;AAAe,KAAA,CAAA;AAE3B,IAAA,MAAMyB,YAAAA,GAAe,IAAA;AACnBrB,QAAAA,MAAAA,EAAAA;AACAL,QAAAA,QAAAA,CAASD,MAAM4B,OAAO,CAAA;AACxB,IAAA,CAAA;AAEA,IAAA,qBACEC,IAAA,CAACC,IAAAA,EAAAA;QAAKC,SAAAA,EAAU,QAAA;QAASC,UAAAA,EAAW,SAAA;QAAUC,GAAAA,EAAK,CAAA;;0BACjDJ,IAAA,CAACK,IAAAA,EAAAA;AAAKC,gBAAAA,WAAAA,EAAa5B,QAAQ,WAAA,GAAc,YAAA;;kCACvC6B,GAAA,CAACC,UAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAD,GAAA,CAAC1C,qBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAA0C,GAAA,CAACE,cAAAA,EAAAA;AACC/B,gCAAAA,KAAAA,EAAOA,KAAAA,IAASgC,SAAAA;gCAChBtC,QAAAA,EAAU0B,YAAAA;gCACVnB,QAAAA,EAAUA;;;;kCAIhBqB,IAAA,CAACW,QAAAA,EAAAA;;0CACCX,IAAA,CAACY,WAAAA,EAAAA;;kDACCL,GAAA,CAACM,GAAAA,EAAAA;wCAAIC,UAAAA,EAAY,CAAA;AACf,wCAAA,QAAA,gBAAAP,GAAA,CAACQ,UAAAA,EAAAA;4CAAWC,GAAAA,EAAI,IAAA;AACd,4CAAA,QAAA,gBAAAT,GAAA,CAACU,SAAAA,EAAAA;gDAAUD,GAAAA,EAAI,MAAA;AAAQ7C,gDAAAA,QAAAA,EAAAA,KAAAA,CAAM+C;;;;kDAGjCX,GAAA,CAACY,YAAAA,EAAAA;AACC,wCAAA,QAAA,gBAAAZ,GAAA,CAACvC,SAAAA,EAAAA;AAAWG,4CAAAA,QAAAA,EAAAA,KAAAA,CAAMiD;;;;;0CAGtBb,GAAA,CAACN,IAAAA,EAAAA;gCAAKa,UAAAA,EAAY,CAAA;gCAAGO,IAAAA,EAAM,CAAA;AACzB,gCAAA,QAAA,gBAAAd,GAAA,CAACe,SAAAA,EAAAA;AAAWtC,oCAAAA,QAAAA,EAAAA;;;;;;;AAIjBN,YAAAA,KAAAA,iBACC6B,GAAA,CAACQ,UAAAA,EAAAA;gBAAWQ,OAAAA,EAAQ,IAAA;gBAAKC,UAAAA,EAAW,MAAA;gBAAOC,SAAAA,EAAU,WAAA;AAClD3C,gBAAAA,QAAAA,EAAAA,aAAAA,CACCJ,OAAOgD,OAAAA,GACH;AACEzC,oBAAAA,EAAAA,EAAIC,QAAQ,CAAC,SAAS,EAAER,KAAAA,CAAMgD,OAAO,CAAA,CAAE,CAAA;AACvCvC,oBAAAA,cAAAA,EAAgBT,MAAMgD;iBAKxB,GACA;AACEzC,oBAAAA,EAAAA,EAAIC,OAAAA,CAAQ,sBAAA,CAAA;oBACZC,cAAAA,EAAgB;AAClB,iBAAA;AAGNuB,aAAAA,CAAAA,GAAAA;;;AAGV;;;;"}

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.js CHANGED Viewed

@@ -12,6 +12,7 @@ var useCropImg = require('../../../hooks/useCropImg.js');
 var useEditAsset = require('../../../hooks/useEditAsset.js');
 var useTracking = require('../../../hooks/useTracking.js');
 var useUpload = require('../../../hooks/useUpload.js');
+var appendSearchParamsToUrl = require('../../../utils/appendSearchParamsToUrl.js');
 var createAssetUrl = require('../../../utils/createAssetUrl.js');
 var downloadFile = require('../../../utils/downloadFile.js');
 require('byte-size');
@@ -56,6 +57,26 @@ const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCr
     const [hasCropIntent, setHasCropIntent] = React__namespace.useState(null);
     const [assetUrl, setAssetUrl] = React__namespace.useState(createAssetUrl.createAssetUrl(asset, false));
     const [thumbnailUrl, setThumbnailUrl] = React__namespace.useState(createAssetUrl.createAssetUrl(asset, true));
+    // When loading a cross-origin image for cropping, append a cache-busting parameter
+    // so the browser makes a fresh request with CORS headers instead of serving a
+    // previously cached non-CORS response (which would taint the canvas and break
+    // cropping). Signed URLs are excluded because modifying them invalidates the signature.
+    const cropUrl = React__namespace.useMemo(()=>{
+        if (!asset.isLocal && !asset.isUrlSigned && assetUrl) {
+            return appendSearchParamsToUrl.appendSearchParamsToUrl({
+                url: assetUrl,
+                params: {
+                    updatedAt: asset.updatedAt
+                }
+            });
+        }
+        return assetUrl;
+    }, [
+        assetUrl,
+        asset.isLocal,
+        asset.isUrlSigned,
+        asset.updatedAt
+    ]);
     const { formatMessage } = reactIntl.useIntl();
     const [showConfirmDialog, setShowConfirmDialog] = React__namespace.useState(false);
     const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg.useCropImg();
@@ -280,7 +301,7 @@ const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCr
                                         ref: previewRef,
                                         mime: asset.mime,
                                         name: asset.name,
-                                        url: hasCropIntent ? assetUrl : thumbnailUrl,
+                                        url: hasCropIntent ? cropUrl : thumbnailUrl,
                                         onLoad: ()=>{
                                             if (asset.isLocal || hasCropIntent) {
                                                 setIsCropImageReady(true);

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewBox.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash, PinMap } from '@strapi/icons';\nimport cropperjscss from 'cropperjs/dist/cropper.css?raw';\nimport { useIntl } from 'react-intl';\nimport { createGlobalStyle } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport { FocalPointActions } from './FocalPointActions';\nimport {\n ActionRow,\n BadgeOverride,\n RelativeBox,\n UploadProgressWrapper,\n Wrapper,\n FocalPointImageWrapper,\n FocalPointAim,\n FocalPointHalo,\n} from './PreviewComponents';\n\nimport type {\n File as FileDefinition,\n RawFile,\n FocalPoint,\n} from '../../../../../shared/contracts/files';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n asset: Asset;\n canUpdate: boolean;\n canCopyLink: boolean;\n canDownload: boolean;\n replacementFile?: File;\n onDelete: (asset?: Asset \| null) => void;\n onCropFinish: () => void;\n onCropStart: () => void;\n onCropCancel: () => void;\n trackedLocation?: string;\n formFocalPoint?: FocalPoint \| null;\n onFocalPointStart: () => void;\n onFocalPointFinish: (focalPoint: FocalPoint) => void;\n onFocalPointCancel: () => void;\n}\n\nexport const PreviewBox = ({\n asset,\n canUpdate,\n canCopyLink,\n canDownload,\n onDelete,\n onCropFinish,\n onCropStart,\n onCropCancel,\n replacementFile,\n trackedLocation,\n formFocalPoint,\n onFocalPointStart,\n onFocalPointFinish,\n onFocalPointCancel,\n}: PreviewBoxProps) => {\n const CropperjsStyle = createGlobalStyle`${cropperjscss}`;\n const { trackUsage } = useTracking();\n const previewRef = React.useRef(null);\n const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n const [hasCropIntent, setHasCropIntent] = React.useState<boolean \| null>(null);\n const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n const { formatMessage } = useIntl();\n const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n useCropImg();\n const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n const [isInFocalPointMode, setIsInFocalPointMode] = React.useState<boolean>(false);\n const [focalPoint, setFocalPoint] = React.useState<FocalPoint>(\n formFocalPoint ?? { x: 50, y: 50 }\n );\n\n const {\n upload,\n isLoading: isLoadingUpload,\n cancel: cancelUpload,\n error: uploadError,\n progress: progressUpload,\n } = useUpload();\n\n React.useEffect(() => {\n // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n // the locally generated one\n if (replacementFile) {\n const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n if (asset.isLocal) {\n asset.url = fileLocalUrl;\n }\n\n setAssetUrl(fileLocalUrl);\n setThumbnailUrl(fileLocalUrl);\n }\n }, [replacementFile, asset]);\n\n React.useEffect(() => {\n if (hasCropIntent === false) {\n stopCropping();\n onCropCancel();\n }\n }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n React.useEffect(() => {\n if (hasCropIntent && isCropImageReady) {\n crop(previewRef.current!);\n onCropStart();\n }\n }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n const handleCropping = async () => {\n const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n // Making sure that when persisting the new asset, the URL changes with width and height\n // So that the browser makes a request and handle the image caching correctly at the good size\n let optimizedCachingImage;\n let optimizedCachingThumbnailImage;\n\n if (asset.isLocal) {\n optimizedCachingImage = URL.createObjectURL(file);\n optimizedCachingThumbnailImage = optimizedCachingImage;\n asset.url = optimizedCachingImage;\n asset.rawFile = file;\n\n trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n } else {\n const updatedAsset = await editAsset(nextAsset, file);\n optimizedCachingImage = createAssetUrl(updatedAsset, false);\n optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n }\n\n setAssetUrl(optimizedCachingImage);\n setThumbnailUrl(optimizedCachingThumbnailImage);\n setHasCropIntent(false);\n };\n\n const isInCroppingMode = isCropping && !isLoading;\n\n const handleDuplication = async () => {\n const nextAsset = { ...asset, width, height };\n const file = (await produceFile(\n nextAsset.name,\n nextAsset.mime!,\n nextAsset.updatedAt!\n )) as RawFile;\n\n await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n setHasCropIntent(false);\n onCropFinish();\n };\n\n const handleCropCancel = () => {\n setHasCropIntent(false);\n };\n\n const handleCropStart = () => {\n setHasCropIntent(true);\n };\n\n const calculateFocalPointFromEvent = (e: React.MouseEvent<HTMLElement>): FocalPoint => {\n const { clientX, clientY } = e;\n const rect = e.currentTarget.getBoundingClientRect();\n const posX = clientX - rect.left;\n const posY = clientY - rect.top;\n\n return {\n x: Number(((posX / rect.width) * 100).toFixed(2)),\n y: Number(((posY / rect.height) * 100).toFixed(2)),\n };\n };\n\n const handleFocalPointClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!isInFocalPointMode) return;\n setFocalPoint(calculateFocalPointFromEvent(e));\n };\n\n const handleFocalPointCancel = () => {\n setIsInFocalPointMode(false);\n setFocalPoint(formFocalPoint ?? { x: 50, y: 50 });\n onFocalPointCancel();\n };\n\n const handleFocalPointStart = () => {\n onFocalPointStart();\n setIsInFocalPointMode(true);\n };\n\n const handleFocalPointValidate = () => {\n setIsInFocalPointMode(false);\n onFocalPointFinish(focalPoint);\n };\n\n const handleFocalPointReset = () => {\n setFocalPoint({ x: 50, y: 50 });\n };\n\n return (\n <>\n <CropperjsStyle />\n <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n {isCropperReady && isInCroppingMode && (\n <CroppingActions\n onValidate={handleCropping}\n onDuplicate={asset.isLocal ? undefined : handleDuplication}\n onCancel={handleCropCancel}\n />\n )}\n\n {isInFocalPointMode && (\n <FocalPointActions\n onValidate={handleFocalPointValidate}\n onCancel={handleFocalPointCancel}\n onReset={handleFocalPointReset}\n />\n )}\n\n <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n <Flex gap={1}>\n {canUpdate && !asset.isLocal && (\n <IconButton\n label={formatMessage({\n id: 'global.delete',\n defaultMessage: 'Delete',\n })}\n onClick={() => setShowConfirmDialog(true)}\n >\n <Trash />\n </IconButton>\n )}\n\n {canDownload && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.download'),\n defaultMessage: 'Download',\n })}\n onClick={() => downloadFile(assetUrl!, asset.name)}\n >\n <DownloadIcon />\n </IconButton>\n )}\n\n {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n onClick={handleCropStart}\n >\n <Resize />\n </IconButton>\n )}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.set-focal-point'),\n defaultMessage: 'Set focal point',\n })}\n onClick={handleFocalPointStart}\n >\n <PinMap />\n </IconButton>\n )}\n </Flex>\n </ActionRow>\n\n <Wrapper>\n {/* This one is for editting an asset /}\n {isLoading && (\n <UploadProgressWrapper>\n <UploadProgress error={error} onCancel={cancel} progress={progress} />\n </UploadProgressWrapper>\n )}\n\n {/ This one is for duplicating an asset after cropping /}\n {isLoadingUpload && (\n <UploadProgressWrapper>\n <UploadProgress\n error={uploadError}\n onCancel={cancelUpload}\n progress={progressUpload}\n />\n </UploadProgressWrapper>\n )}\n\n <FocalPointImageWrapper>\n <AssetPreview\n ref={previewRef}\n mime={asset.mime!}\n name={asset.name}\n url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n onLoad={() => {\n if (asset.isLocal \|\| hasCropIntent) {\n setIsCropImageReady(true);\n }\n }}\n onClick={handleFocalPointClick}\n style={{ cursor: isInFocalPointMode ? 'crosshair' : undefined }}\n />\n\n {/ Show the set focal point marker */}\n {isInFocalPointMode && (\n <FocalPointAim $focalPoint={focalPoint}>\n <FocalPointHalo />\n </FocalPointAim>\n )}\n </FocalPointImageWrapper>\n </Wrapper>\n\n <ActionRow\n paddingLeft={2}\n paddingRight={2}\n justifyContent=\"flex-end\"\n $blurry={isInCroppingMode \|\| isInFocalPointMode}\n >\n {isInCroppingMode && width && height && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {width && height ? `${height}✕${width}` : 'N/A'}\n </BadgeOverride>\n )}\n {isInFocalPointMode && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {`x: ${focalPoint.x}% \| y: ${focalPoint.y}%`}\n </BadgeOverride>\n )}\n </ActionRow>\n </RelativeBox>\n\n <RemoveAssetDialog\n open={showConfirmDialog}\n onClose={(value) => {\n setShowConfirmDialog(false);\n if (value === null) {\n onDelete(null);\n }\n }}\n asset={asset}\n />\n </>\n );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","formFocalPoint","onFocalPointStart","onFocalPointFinish","onFocalPointCancel","CropperjsStyle","createGlobalStyle","cropperjscss","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","isInFocalPointMode","setIsInFocalPointMode","focalPoint","setFocalPoint","x","y","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","calculateFocalPointFromEvent","e","clientX","clientY","rect","currentTarget","getBoundingClientRect","posX","left","posY","top","Number","toFixed","handleFocalPointClick","handleFocalPointCancel","handleFocalPointStart","handleFocalPointValidate","handleFocalPointReset","_jsxs","_Fragment","_jsx","RelativeBox","hasRadius","background","borderColor","CroppingActions","onValidate","onDuplicate","undefined","onCancel","FocalPointActions","onReset","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","PinMap","Wrapper","UploadProgressWrapper","UploadProgress","FocalPointImageWrapper","AssetPreview","ref","onLoad","style","cursor","FocalPointAim","$focalPoint","FocalPointHalo","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose","value"],"mappings":"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"}
1	+ {"version":3,"file":"PreviewBox.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash, PinMap } from '@strapi/icons';\nimport cropperjscss from 'cropperjs/dist/cropper.css?raw';\nimport { useIntl } from 'react-intl';\nimport { createGlobalStyle } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { appendSearchParamsToUrl, createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport { FocalPointActions } from './FocalPointActions';\nimport {\n ActionRow,\n BadgeOverride,\n RelativeBox,\n UploadProgressWrapper,\n Wrapper,\n FocalPointImageWrapper,\n FocalPointAim,\n FocalPointHalo,\n} from './PreviewComponents';\n\nimport type {\n File as FileDefinition,\n RawFile,\n FocalPoint,\n} from '../../../../../shared/contracts/files';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n asset: Asset;\n canUpdate: boolean;\n canCopyLink: boolean;\n canDownload: boolean;\n replacementFile?: File;\n onDelete: (asset?: Asset \| null) => void;\n onCropFinish: () => void;\n onCropStart: () => void;\n onCropCancel: () => void;\n trackedLocation?: string;\n formFocalPoint?: FocalPoint \| null;\n onFocalPointStart: () => void;\n onFocalPointFinish: (focalPoint: FocalPoint) => void;\n onFocalPointCancel: () => void;\n}\n\nexport const PreviewBox = ({\n asset,\n canUpdate,\n canCopyLink,\n canDownload,\n onDelete,\n onCropFinish,\n onCropStart,\n onCropCancel,\n replacementFile,\n trackedLocation,\n formFocalPoint,\n onFocalPointStart,\n onFocalPointFinish,\n onFocalPointCancel,\n}: PreviewBoxProps) => {\n const CropperjsStyle = createGlobalStyle`${cropperjscss}`;\n const { trackUsage } = useTracking();\n const previewRef = React.useRef(null);\n const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n const [hasCropIntent, setHasCropIntent] = React.useState<boolean \| null>(null);\n const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n\n // When loading a cross-origin image for cropping, append a cache-busting parameter\n // so the browser makes a fresh request with CORS headers instead of serving a\n // previously cached non-CORS response (which would taint the canvas and break\n // cropping). Signed URLs are excluded because modifying them invalidates the signature.\n const cropUrl = React.useMemo(() => {\n if (!asset.isLocal && !asset.isUrlSigned && assetUrl) {\n return appendSearchParamsToUrl({ url: assetUrl, params: { updatedAt: asset.updatedAt } });\n }\n\n return assetUrl;\n }, [assetUrl, asset.isLocal, asset.isUrlSigned, asset.updatedAt]);\n\n const { formatMessage } = useIntl();\n const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n useCropImg();\n const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n const [isInFocalPointMode, setIsInFocalPointMode] = React.useState<boolean>(false);\n const [focalPoint, setFocalPoint] = React.useState<FocalPoint>(\n formFocalPoint ?? { x: 50, y: 50 }\n );\n\n const {\n upload,\n isLoading: isLoadingUpload,\n cancel: cancelUpload,\n error: uploadError,\n progress: progressUpload,\n } = useUpload();\n\n React.useEffect(() => {\n // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n // the locally generated one\n if (replacementFile) {\n const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n if (asset.isLocal) {\n asset.url = fileLocalUrl;\n }\n\n setAssetUrl(fileLocalUrl);\n setThumbnailUrl(fileLocalUrl);\n }\n }, [replacementFile, asset]);\n\n React.useEffect(() => {\n if (hasCropIntent === false) {\n stopCropping();\n onCropCancel();\n }\n }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n React.useEffect(() => {\n if (hasCropIntent && isCropImageReady) {\n crop(previewRef.current!);\n onCropStart();\n }\n }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n const handleCropping = async () => {\n const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n // Making sure that when persisting the new asset, the URL changes with width and height\n // So that the browser makes a request and handle the image caching correctly at the good size\n let optimizedCachingImage;\n let optimizedCachingThumbnailImage;\n\n if (asset.isLocal) {\n optimizedCachingImage = URL.createObjectURL(file);\n optimizedCachingThumbnailImage = optimizedCachingImage;\n asset.url = optimizedCachingImage;\n asset.rawFile = file;\n\n trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n } else {\n const updatedAsset = await editAsset(nextAsset, file);\n optimizedCachingImage = createAssetUrl(updatedAsset, false);\n optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n }\n\n setAssetUrl(optimizedCachingImage);\n setThumbnailUrl(optimizedCachingThumbnailImage);\n setHasCropIntent(false);\n };\n\n const isInCroppingMode = isCropping && !isLoading;\n\n const handleDuplication = async () => {\n const nextAsset = { ...asset, width, height };\n const file = (await produceFile(\n nextAsset.name,\n nextAsset.mime!,\n nextAsset.updatedAt!\n )) as RawFile;\n\n await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n setHasCropIntent(false);\n onCropFinish();\n };\n\n const handleCropCancel = () => {\n setHasCropIntent(false);\n };\n\n const handleCropStart = () => {\n setHasCropIntent(true);\n };\n\n const calculateFocalPointFromEvent = (e: React.MouseEvent<HTMLElement>): FocalPoint => {\n const { clientX, clientY } = e;\n const rect = e.currentTarget.getBoundingClientRect();\n const posX = clientX - rect.left;\n const posY = clientY - rect.top;\n\n return {\n x: Number(((posX / rect.width) * 100).toFixed(2)),\n y: Number(((posY / rect.height) * 100).toFixed(2)),\n };\n };\n\n const handleFocalPointClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!isInFocalPointMode) return;\n setFocalPoint(calculateFocalPointFromEvent(e));\n };\n\n const handleFocalPointCancel = () => {\n setIsInFocalPointMode(false);\n setFocalPoint(formFocalPoint ?? { x: 50, y: 50 });\n onFocalPointCancel();\n };\n\n const handleFocalPointStart = () => {\n onFocalPointStart();\n setIsInFocalPointMode(true);\n };\n\n const handleFocalPointValidate = () => {\n setIsInFocalPointMode(false);\n onFocalPointFinish(focalPoint);\n };\n\n const handleFocalPointReset = () => {\n setFocalPoint({ x: 50, y: 50 });\n };\n\n return (\n <>\n <CropperjsStyle />\n <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n {isCropperReady && isInCroppingMode && (\n <CroppingActions\n onValidate={handleCropping}\n onDuplicate={asset.isLocal ? undefined : handleDuplication}\n onCancel={handleCropCancel}\n />\n )}\n\n {isInFocalPointMode && (\n <FocalPointActions\n onValidate={handleFocalPointValidate}\n onCancel={handleFocalPointCancel}\n onReset={handleFocalPointReset}\n />\n )}\n\n <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n <Flex gap={1}>\n {canUpdate && !asset.isLocal && (\n <IconButton\n label={formatMessage({\n id: 'global.delete',\n defaultMessage: 'Delete',\n })}\n onClick={() => setShowConfirmDialog(true)}\n >\n <Trash />\n </IconButton>\n )}\n\n {canDownload && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.download'),\n defaultMessage: 'Download',\n })}\n onClick={() => downloadFile(assetUrl!, asset.name)}\n >\n <DownloadIcon />\n </IconButton>\n )}\n\n {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n onClick={handleCropStart}\n >\n <Resize />\n </IconButton>\n )}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.set-focal-point'),\n defaultMessage: 'Set focal point',\n })}\n onClick={handleFocalPointStart}\n >\n <PinMap />\n </IconButton>\n )}\n </Flex>\n </ActionRow>\n\n <Wrapper>\n {/* This one is for editting an asset /}\n {isLoading && (\n <UploadProgressWrapper>\n <UploadProgress error={error} onCancel={cancel} progress={progress} />\n </UploadProgressWrapper>\n )}\n\n {/ This one is for duplicating an asset after cropping /}\n {isLoadingUpload && (\n <UploadProgressWrapper>\n <UploadProgress\n error={uploadError}\n onCancel={cancelUpload}\n progress={progressUpload}\n />\n </UploadProgressWrapper>\n )}\n\n <FocalPointImageWrapper>\n <AssetPreview\n ref={previewRef}\n mime={asset.mime!}\n name={asset.name}\n url={hasCropIntent ? cropUrl! : thumbnailUrl!}\n onLoad={() => {\n if (asset.isLocal \|\| hasCropIntent) {\n setIsCropImageReady(true);\n }\n }}\n onClick={handleFocalPointClick}\n style={{ cursor: isInFocalPointMode ? 'crosshair' : undefined }}\n />\n\n {/ Show the set focal point marker */}\n {isInFocalPointMode && (\n <FocalPointAim $focalPoint={focalPoint}>\n <FocalPointHalo />\n </FocalPointAim>\n )}\n </FocalPointImageWrapper>\n </Wrapper>\n\n <ActionRow\n paddingLeft={2}\n paddingRight={2}\n justifyContent=\"flex-end\"\n $blurry={isInCroppingMode \|\| isInFocalPointMode}\n >\n {isInCroppingMode && width && height && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {width && height ? `${height}✕${width}` : 'N/A'}\n </BadgeOverride>\n )}\n {isInFocalPointMode && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {`x: ${focalPoint.x}% \| y: ${focalPoint.y}%`}\n </BadgeOverride>\n )}\n </ActionRow>\n </RelativeBox>\n\n <RemoveAssetDialog\n open={showConfirmDialog}\n onClose={(value) => {\n setShowConfirmDialog(false);\n if (value === null) {\n onDelete(null);\n }\n }}\n asset={asset}\n />\n </>\n );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","formFocalPoint","onFocalPointStart","onFocalPointFinish","onFocalPointCancel","CropperjsStyle","createGlobalStyle","cropperjscss","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","cropUrl","useMemo","isLocal","isUrlSigned","appendSearchParamsToUrl","url","params","updatedAt","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","isInFocalPointMode","setIsInFocalPointMode","focalPoint","setFocalPoint","x","y","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","current","handleCropping","nextAsset","folder","id","file","name","mime","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","calculateFocalPointFromEvent","e","clientX","clientY","rect","currentTarget","getBoundingClientRect","posX","left","posY","top","Number","toFixed","handleFocalPointClick","handleFocalPointCancel","handleFocalPointStart","handleFocalPointValidate","handleFocalPointReset","_jsxs","_Fragment","_jsx","RelativeBox","hasRadius","background","borderColor","CroppingActions","onValidate","onDuplicate","undefined","onCancel","FocalPointActions","onReset","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","PinMap","Wrapper","UploadProgressWrapper","UploadProgress","FocalPointImageWrapper","AssetPreview","ref","onLoad","style","cursor","FocalPointAim","$focalPoint","FocalPointHalo","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose","value"],"mappings":"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"}

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.mjs CHANGED Viewed

@@ -10,6 +10,7 @@ import { useCropImg } from '../../../hooks/useCropImg.mjs';
 import { useEditAsset } from '../../../hooks/useEditAsset.mjs';
 import { useTracking } from '../../../hooks/useTracking.mjs';
 import { useUpload } from '../../../hooks/useUpload.mjs';
+import { appendSearchParamsToUrl } from '../../../utils/appendSearchParamsToUrl.mjs';
 import { createAssetUrl } from '../../../utils/createAssetUrl.mjs';
 import { downloadFile } from '../../../utils/downloadFile.mjs';
 import 'byte-size';
@@ -35,6 +36,26 @@ const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCr
     const [hasCropIntent, setHasCropIntent] = React.useState(null);
     const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));
     const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));
+    // When loading a cross-origin image for cropping, append a cache-busting parameter
+    // so the browser makes a fresh request with CORS headers instead of serving a
+    // previously cached non-CORS response (which would taint the canvas and break
+    // cropping). Signed URLs are excluded because modifying them invalidates the signature.
+    const cropUrl = React.useMemo(()=>{
+        if (!asset.isLocal && !asset.isUrlSigned && assetUrl) {
+            return appendSearchParamsToUrl({
+                url: assetUrl,
+                params: {
+                    updatedAt: asset.updatedAt
+                }
+            });
+        }
+        return assetUrl;
+    }, [
+        assetUrl,
+        asset.isLocal,
+        asset.isUrlSigned,
+        asset.updatedAt
+    ]);
     const { formatMessage } = useIntl();
     const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
     const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg();
@@ -259,7 +280,7 @@ const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCr
                                         ref: previewRef,
                                         mime: asset.mime,
                                         name: asset.name,
-                                        url: hasCropIntent ? assetUrl : thumbnailUrl,
+                                        url: hasCropIntent ? cropUrl : thumbnailUrl,
                                         onLoad: ()=>{
                                             if (asset.isLocal || hasCropIntent) {
                                                 setIsCropImageReady(true);

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewBox.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash, PinMap } from '@strapi/icons';\nimport cropperjscss from 'cropperjs/dist/cropper.css?raw';\nimport { useIntl } from 'react-intl';\nimport { createGlobalStyle } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport { FocalPointActions } from './FocalPointActions';\nimport {\n ActionRow,\n BadgeOverride,\n RelativeBox,\n UploadProgressWrapper,\n Wrapper,\n FocalPointImageWrapper,\n FocalPointAim,\n FocalPointHalo,\n} from './PreviewComponents';\n\nimport type {\n File as FileDefinition,\n RawFile,\n FocalPoint,\n} from '../../../../../shared/contracts/files';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n asset: Asset;\n canUpdate: boolean;\n canCopyLink: boolean;\n canDownload: boolean;\n replacementFile?: File;\n onDelete: (asset?: Asset \| null) => void;\n onCropFinish: () => void;\n onCropStart: () => void;\n onCropCancel: () => void;\n trackedLocation?: string;\n formFocalPoint?: FocalPoint \| null;\n onFocalPointStart: () => void;\n onFocalPointFinish: (focalPoint: FocalPoint) => void;\n onFocalPointCancel: () => void;\n}\n\nexport const PreviewBox = ({\n asset,\n canUpdate,\n canCopyLink,\n canDownload,\n onDelete,\n onCropFinish,\n onCropStart,\n onCropCancel,\n replacementFile,\n trackedLocation,\n formFocalPoint,\n onFocalPointStart,\n onFocalPointFinish,\n onFocalPointCancel,\n}: PreviewBoxProps) => {\n const CropperjsStyle = createGlobalStyle`${cropperjscss}`;\n const { trackUsage } = useTracking();\n const previewRef = React.useRef(null);\n const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n const [hasCropIntent, setHasCropIntent] = React.useState<boolean \| null>(null);\n const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n const { formatMessage } = useIntl();\n const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n useCropImg();\n const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n const [isInFocalPointMode, setIsInFocalPointMode] = React.useState<boolean>(false);\n const [focalPoint, setFocalPoint] = React.useState<FocalPoint>(\n formFocalPoint ?? { x: 50, y: 50 }\n );\n\n const {\n upload,\n isLoading: isLoadingUpload,\n cancel: cancelUpload,\n error: uploadError,\n progress: progressUpload,\n } = useUpload();\n\n React.useEffect(() => {\n // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n // the locally generated one\n if (replacementFile) {\n const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n if (asset.isLocal) {\n asset.url = fileLocalUrl;\n }\n\n setAssetUrl(fileLocalUrl);\n setThumbnailUrl(fileLocalUrl);\n }\n }, [replacementFile, asset]);\n\n React.useEffect(() => {\n if (hasCropIntent === false) {\n stopCropping();\n onCropCancel();\n }\n }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n React.useEffect(() => {\n if (hasCropIntent && isCropImageReady) {\n crop(previewRef.current!);\n onCropStart();\n }\n }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n const handleCropping = async () => {\n const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n // Making sure that when persisting the new asset, the URL changes with width and height\n // So that the browser makes a request and handle the image caching correctly at the good size\n let optimizedCachingImage;\n let optimizedCachingThumbnailImage;\n\n if (asset.isLocal) {\n optimizedCachingImage = URL.createObjectURL(file);\n optimizedCachingThumbnailImage = optimizedCachingImage;\n asset.url = optimizedCachingImage;\n asset.rawFile = file;\n\n trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n } else {\n const updatedAsset = await editAsset(nextAsset, file);\n optimizedCachingImage = createAssetUrl(updatedAsset, false);\n optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n }\n\n setAssetUrl(optimizedCachingImage);\n setThumbnailUrl(optimizedCachingThumbnailImage);\n setHasCropIntent(false);\n };\n\n const isInCroppingMode = isCropping && !isLoading;\n\n const handleDuplication = async () => {\n const nextAsset = { ...asset, width, height };\n const file = (await produceFile(\n nextAsset.name,\n nextAsset.mime!,\n nextAsset.updatedAt!\n )) as RawFile;\n\n await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n setHasCropIntent(false);\n onCropFinish();\n };\n\n const handleCropCancel = () => {\n setHasCropIntent(false);\n };\n\n const handleCropStart = () => {\n setHasCropIntent(true);\n };\n\n const calculateFocalPointFromEvent = (e: React.MouseEvent<HTMLElement>): FocalPoint => {\n const { clientX, clientY } = e;\n const rect = e.currentTarget.getBoundingClientRect();\n const posX = clientX - rect.left;\n const posY = clientY - rect.top;\n\n return {\n x: Number(((posX / rect.width) * 100).toFixed(2)),\n y: Number(((posY / rect.height) * 100).toFixed(2)),\n };\n };\n\n const handleFocalPointClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!isInFocalPointMode) return;\n setFocalPoint(calculateFocalPointFromEvent(e));\n };\n\n const handleFocalPointCancel = () => {\n setIsInFocalPointMode(false);\n setFocalPoint(formFocalPoint ?? { x: 50, y: 50 });\n onFocalPointCancel();\n };\n\n const handleFocalPointStart = () => {\n onFocalPointStart();\n setIsInFocalPointMode(true);\n };\n\n const handleFocalPointValidate = () => {\n setIsInFocalPointMode(false);\n onFocalPointFinish(focalPoint);\n };\n\n const handleFocalPointReset = () => {\n setFocalPoint({ x: 50, y: 50 });\n };\n\n return (\n <>\n <CropperjsStyle />\n <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n {isCropperReady && isInCroppingMode && (\n <CroppingActions\n onValidate={handleCropping}\n onDuplicate={asset.isLocal ? undefined : handleDuplication}\n onCancel={handleCropCancel}\n />\n )}\n\n {isInFocalPointMode && (\n <FocalPointActions\n onValidate={handleFocalPointValidate}\n onCancel={handleFocalPointCancel}\n onReset={handleFocalPointReset}\n />\n )}\n\n <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n <Flex gap={1}>\n {canUpdate && !asset.isLocal && (\n <IconButton\n label={formatMessage({\n id: 'global.delete',\n defaultMessage: 'Delete',\n })}\n onClick={() => setShowConfirmDialog(true)}\n >\n <Trash />\n </IconButton>\n )}\n\n {canDownload && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.download'),\n defaultMessage: 'Download',\n })}\n onClick={() => downloadFile(assetUrl!, asset.name)}\n >\n <DownloadIcon />\n </IconButton>\n )}\n\n {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n onClick={handleCropStart}\n >\n <Resize />\n </IconButton>\n )}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.set-focal-point'),\n defaultMessage: 'Set focal point',\n })}\n onClick={handleFocalPointStart}\n >\n <PinMap />\n </IconButton>\n )}\n </Flex>\n </ActionRow>\n\n <Wrapper>\n {/* This one is for editting an asset /}\n {isLoading && (\n <UploadProgressWrapper>\n <UploadProgress error={error} onCancel={cancel} progress={progress} />\n </UploadProgressWrapper>\n )}\n\n {/ This one is for duplicating an asset after cropping /}\n {isLoadingUpload && (\n <UploadProgressWrapper>\n <UploadProgress\n error={uploadError}\n onCancel={cancelUpload}\n progress={progressUpload}\n />\n </UploadProgressWrapper>\n )}\n\n <FocalPointImageWrapper>\n <AssetPreview\n ref={previewRef}\n mime={asset.mime!}\n name={asset.name}\n url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n onLoad={() => {\n if (asset.isLocal \|\| hasCropIntent) {\n setIsCropImageReady(true);\n }\n }}\n onClick={handleFocalPointClick}\n style={{ cursor: isInFocalPointMode ? 'crosshair' : undefined }}\n />\n\n {/ Show the set focal point marker */}\n {isInFocalPointMode && (\n <FocalPointAim $focalPoint={focalPoint}>\n <FocalPointHalo />\n </FocalPointAim>\n )}\n </FocalPointImageWrapper>\n </Wrapper>\n\n <ActionRow\n paddingLeft={2}\n paddingRight={2}\n justifyContent=\"flex-end\"\n $blurry={isInCroppingMode \|\| isInFocalPointMode}\n >\n {isInCroppingMode && width && height && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {width && height ? `${height}✕${width}` : 'N/A'}\n </BadgeOverride>\n )}\n {isInFocalPointMode && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {`x: ${focalPoint.x}% \| y: ${focalPoint.y}%`}\n </BadgeOverride>\n )}\n </ActionRow>\n </RelativeBox>\n\n <RemoveAssetDialog\n open={showConfirmDialog}\n onClose={(value) => {\n setShowConfirmDialog(false);\n if (value === null) {\n onDelete(null);\n }\n }}\n asset={asset}\n />\n </>\n );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","formFocalPoint","onFocalPointStart","onFocalPointFinish","onFocalPointCancel","CropperjsStyle","createGlobalStyle","cropperjscss","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","isInFocalPointMode","setIsInFocalPointMode","focalPoint","setFocalPoint","x","y","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","calculateFocalPointFromEvent","e","clientX","clientY","rect","currentTarget","getBoundingClientRect","posX","left","posY","top","Number","toFixed","handleFocalPointClick","handleFocalPointCancel","handleFocalPointStart","handleFocalPointValidate","handleFocalPointReset","_jsxs","_Fragment","_jsx","RelativeBox","hasRadius","background","borderColor","CroppingActions","onValidate","onDuplicate","undefined","onCancel","FocalPointActions","onReset","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","PinMap","Wrapper","UploadProgressWrapper","UploadProgress","FocalPointImageWrapper","AssetPreview","ref","onLoad","style","cursor","FocalPointAim","$focalPoint","FocalPointHalo","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose","value"],"mappings":"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"}
1	+ {"version":3,"file":"PreviewBox.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash, PinMap } from '@strapi/icons';\nimport cropperjscss from 'cropperjs/dist/cropper.css?raw';\nimport { useIntl } from 'react-intl';\nimport { createGlobalStyle } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { appendSearchParamsToUrl, createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport { FocalPointActions } from './FocalPointActions';\nimport {\n ActionRow,\n BadgeOverride,\n RelativeBox,\n UploadProgressWrapper,\n Wrapper,\n FocalPointImageWrapper,\n FocalPointAim,\n FocalPointHalo,\n} from './PreviewComponents';\n\nimport type {\n File as FileDefinition,\n RawFile,\n FocalPoint,\n} from '../../../../../shared/contracts/files';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n asset: Asset;\n canUpdate: boolean;\n canCopyLink: boolean;\n canDownload: boolean;\n replacementFile?: File;\n onDelete: (asset?: Asset \| null) => void;\n onCropFinish: () => void;\n onCropStart: () => void;\n onCropCancel: () => void;\n trackedLocation?: string;\n formFocalPoint?: FocalPoint \| null;\n onFocalPointStart: () => void;\n onFocalPointFinish: (focalPoint: FocalPoint) => void;\n onFocalPointCancel: () => void;\n}\n\nexport const PreviewBox = ({\n asset,\n canUpdate,\n canCopyLink,\n canDownload,\n onDelete,\n onCropFinish,\n onCropStart,\n onCropCancel,\n replacementFile,\n trackedLocation,\n formFocalPoint,\n onFocalPointStart,\n onFocalPointFinish,\n onFocalPointCancel,\n}: PreviewBoxProps) => {\n const CropperjsStyle = createGlobalStyle`${cropperjscss}`;\n const { trackUsage } = useTracking();\n const previewRef = React.useRef(null);\n const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n const [hasCropIntent, setHasCropIntent] = React.useState<boolean \| null>(null);\n const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n\n // When loading a cross-origin image for cropping, append a cache-busting parameter\n // so the browser makes a fresh request with CORS headers instead of serving a\n // previously cached non-CORS response (which would taint the canvas and break\n // cropping). Signed URLs are excluded because modifying them invalidates the signature.\n const cropUrl = React.useMemo(() => {\n if (!asset.isLocal && !asset.isUrlSigned && assetUrl) {\n return appendSearchParamsToUrl({ url: assetUrl, params: { updatedAt: asset.updatedAt } });\n }\n\n return assetUrl;\n }, [assetUrl, asset.isLocal, asset.isUrlSigned, asset.updatedAt]);\n\n const { formatMessage } = useIntl();\n const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n useCropImg();\n const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n const [isInFocalPointMode, setIsInFocalPointMode] = React.useState<boolean>(false);\n const [focalPoint, setFocalPoint] = React.useState<FocalPoint>(\n formFocalPoint ?? { x: 50, y: 50 }\n );\n\n const {\n upload,\n isLoading: isLoadingUpload,\n cancel: cancelUpload,\n error: uploadError,\n progress: progressUpload,\n } = useUpload();\n\n React.useEffect(() => {\n // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n // the locally generated one\n if (replacementFile) {\n const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n if (asset.isLocal) {\n asset.url = fileLocalUrl;\n }\n\n setAssetUrl(fileLocalUrl);\n setThumbnailUrl(fileLocalUrl);\n }\n }, [replacementFile, asset]);\n\n React.useEffect(() => {\n if (hasCropIntent === false) {\n stopCropping();\n onCropCancel();\n }\n }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n React.useEffect(() => {\n if (hasCropIntent && isCropImageReady) {\n crop(previewRef.current!);\n onCropStart();\n }\n }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n const handleCropping = async () => {\n const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n // Making sure that when persisting the new asset, the URL changes with width and height\n // So that the browser makes a request and handle the image caching correctly at the good size\n let optimizedCachingImage;\n let optimizedCachingThumbnailImage;\n\n if (asset.isLocal) {\n optimizedCachingImage = URL.createObjectURL(file);\n optimizedCachingThumbnailImage = optimizedCachingImage;\n asset.url = optimizedCachingImage;\n asset.rawFile = file;\n\n trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n } else {\n const updatedAsset = await editAsset(nextAsset, file);\n optimizedCachingImage = createAssetUrl(updatedAsset, false);\n optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n }\n\n setAssetUrl(optimizedCachingImage);\n setThumbnailUrl(optimizedCachingThumbnailImage);\n setHasCropIntent(false);\n };\n\n const isInCroppingMode = isCropping && !isLoading;\n\n const handleDuplication = async () => {\n const nextAsset = { ...asset, width, height };\n const file = (await produceFile(\n nextAsset.name,\n nextAsset.mime!,\n nextAsset.updatedAt!\n )) as RawFile;\n\n await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n setHasCropIntent(false);\n onCropFinish();\n };\n\n const handleCropCancel = () => {\n setHasCropIntent(false);\n };\n\n const handleCropStart = () => {\n setHasCropIntent(true);\n };\n\n const calculateFocalPointFromEvent = (e: React.MouseEvent<HTMLElement>): FocalPoint => {\n const { clientX, clientY } = e;\n const rect = e.currentTarget.getBoundingClientRect();\n const posX = clientX - rect.left;\n const posY = clientY - rect.top;\n\n return {\n x: Number(((posX / rect.width) * 100).toFixed(2)),\n y: Number(((posY / rect.height) * 100).toFixed(2)),\n };\n };\n\n const handleFocalPointClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!isInFocalPointMode) return;\n setFocalPoint(calculateFocalPointFromEvent(e));\n };\n\n const handleFocalPointCancel = () => {\n setIsInFocalPointMode(false);\n setFocalPoint(formFocalPoint ?? { x: 50, y: 50 });\n onFocalPointCancel();\n };\n\n const handleFocalPointStart = () => {\n onFocalPointStart();\n setIsInFocalPointMode(true);\n };\n\n const handleFocalPointValidate = () => {\n setIsInFocalPointMode(false);\n onFocalPointFinish(focalPoint);\n };\n\n const handleFocalPointReset = () => {\n setFocalPoint({ x: 50, y: 50 });\n };\n\n return (\n <>\n <CropperjsStyle />\n <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n {isCropperReady && isInCroppingMode && (\n <CroppingActions\n onValidate={handleCropping}\n onDuplicate={asset.isLocal ? undefined : handleDuplication}\n onCancel={handleCropCancel}\n />\n )}\n\n {isInFocalPointMode && (\n <FocalPointActions\n onValidate={handleFocalPointValidate}\n onCancel={handleFocalPointCancel}\n onReset={handleFocalPointReset}\n />\n )}\n\n <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n <Flex gap={1}>\n {canUpdate && !asset.isLocal && (\n <IconButton\n label={formatMessage({\n id: 'global.delete',\n defaultMessage: 'Delete',\n })}\n onClick={() => setShowConfirmDialog(true)}\n >\n <Trash />\n </IconButton>\n )}\n\n {canDownload && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.download'),\n defaultMessage: 'Download',\n })}\n onClick={() => downloadFile(assetUrl!, asset.name)}\n >\n <DownloadIcon />\n </IconButton>\n )}\n\n {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n onClick={handleCropStart}\n >\n <Resize />\n </IconButton>\n )}\n\n {canUpdate && asset.mime?.includes(AssetType.Image) && (\n <IconButton\n label={formatMessage({\n id: getTrad('control-card.set-focal-point'),\n defaultMessage: 'Set focal point',\n })}\n onClick={handleFocalPointStart}\n >\n <PinMap />\n </IconButton>\n )}\n </Flex>\n </ActionRow>\n\n <Wrapper>\n {/* This one is for editting an asset /}\n {isLoading && (\n <UploadProgressWrapper>\n <UploadProgress error={error} onCancel={cancel} progress={progress} />\n </UploadProgressWrapper>\n )}\n\n {/ This one is for duplicating an asset after cropping /}\n {isLoadingUpload && (\n <UploadProgressWrapper>\n <UploadProgress\n error={uploadError}\n onCancel={cancelUpload}\n progress={progressUpload}\n />\n </UploadProgressWrapper>\n )}\n\n <FocalPointImageWrapper>\n <AssetPreview\n ref={previewRef}\n mime={asset.mime!}\n name={asset.name}\n url={hasCropIntent ? cropUrl! : thumbnailUrl!}\n onLoad={() => {\n if (asset.isLocal \|\| hasCropIntent) {\n setIsCropImageReady(true);\n }\n }}\n onClick={handleFocalPointClick}\n style={{ cursor: isInFocalPointMode ? 'crosshair' : undefined }}\n />\n\n {/ Show the set focal point marker */}\n {isInFocalPointMode && (\n <FocalPointAim $focalPoint={focalPoint}>\n <FocalPointHalo />\n </FocalPointAim>\n )}\n </FocalPointImageWrapper>\n </Wrapper>\n\n <ActionRow\n paddingLeft={2}\n paddingRight={2}\n justifyContent=\"flex-end\"\n $blurry={isInCroppingMode \|\| isInFocalPointMode}\n >\n {isInCroppingMode && width && height && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {width && height ? `${height}✕${width}` : 'N/A'}\n </BadgeOverride>\n )}\n {isInFocalPointMode && (\n <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n {`x: ${focalPoint.x}% \| y: ${focalPoint.y}%`}\n </BadgeOverride>\n )}\n </ActionRow>\n </RelativeBox>\n\n <RemoveAssetDialog\n open={showConfirmDialog}\n onClose={(value) => {\n setShowConfirmDialog(false);\n if (value === null) {\n onDelete(null);\n }\n }}\n asset={asset}\n />\n </>\n );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","formFocalPoint","onFocalPointStart","onFocalPointFinish","onFocalPointCancel","CropperjsStyle","createGlobalStyle","cropperjscss","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","cropUrl","useMemo","isLocal","isUrlSigned","appendSearchParamsToUrl","url","params","updatedAt","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","isInFocalPointMode","setIsInFocalPointMode","focalPoint","setFocalPoint","x","y","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","current","handleCropping","nextAsset","folder","id","file","name","mime","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","calculateFocalPointFromEvent","e","clientX","clientY","rect","currentTarget","getBoundingClientRect","posX","left","posY","top","Number","toFixed","handleFocalPointClick","handleFocalPointCancel","handleFocalPointStart","handleFocalPointValidate","handleFocalPointReset","_jsxs","_Fragment","_jsx","RelativeBox","hasRadius","background","borderColor","CroppingActions","onValidate","onDuplicate","undefined","onCancel","FocalPointActions","onReset","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","PinMap","Wrapper","UploadProgressWrapper","UploadProgress","FocalPointImageWrapper","AssetPreview","ref","onLoad","style","cursor","FocalPointAim","$focalPoint","FocalPointHalo","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose","value"],"mappings":"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"}

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js CHANGED Viewed

@@ -79,7 +79,7 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
                             }),
                             error: error?.message || (errors.urls ? formatMessage({
                                 id: errors.urls,
-                                defaultMessage: 'An error occured'
+                                defaultMessage: 'An error occurred'
                             }) : undefined),
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FromUrlForm.js","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState<Error \| undefined>(undefined);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const handleSubmit = async ({ urls }: { urls: string }) => {\n setLoading(true);\n const urlArray = urls.split(/\\r?\\n/);\n try {\n const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n }\n\n // no need to set the loading to false since the component unmounts\n onAddAsset(assets);\n } catch (e: unknown) {\n setError(e as Error);\n setLoading(false);\n }\n };\n\n return (\n <Formik\n enableReinitialize\n initialValues={{\n urls: '',\n }}\n onSubmit={handleSubmit}\n validationSchema={urlSchema}\n validateOnChange={false}\n >\n {({ values, errors, handleChange }) => (\n <Form noValidate>\n <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n <Field.Root\n hint={formatMessage({\n id: getTrad('input.url.description'),\n defaultMessage: 'Separate your URL links by a carriage return.',\n })}\n error={\n error?.message \|\|\n (errors.urls\n ? formatMessage({ id: errors.urls, defaultMessage: 'An error ~~occured~~' })\n : undefined)\n }\n >\n <Field.Label>\n {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n </Field.Label>\n <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n <Field.Hint />\n <Field.Error />\n </Field.Root>\n </Box>\n\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {formatMessage({\n id: getTrad('button.next'),\n defaultMessage: 'Next',\n })}\n </Button>\n </Modal.Footer>\n </Form>\n )}\n </Formik>\n );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,eAAe,EAAoB,GAAA;AACpF,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGH,gBAAAA,CAAMC,QAAQ,CAAoBG,SAAAA,CAAAA;IAC5D,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,uBAAAA,EAAAA;AAEvB,IAAA,MAAMC,YAAAA,GAAe,OAAO,EAAEC,IAAI,EAAoB,GAAA;QACpDX,UAAAA,CAAW,IAAA,CAAA;QACX,MAAMY,QAAAA,GAAWD,IAAAA,CAAKE,KAAK,CAAC,OAAA,CAAA;QAC5B,IAAI;YACF,MAAMC,MAAAA,GAA4B,MAAMC,yBAAAA,CAAaH,QAAAA,CAAAA;AAErD,YAAA,IAAId,eAAAA,EAAiB;AACnBU,gBAAAA,UAAAA,CAAW,eAAA,EAAiB;oBAAEQ,MAAAA,EAAQ,KAAA;oBAAOC,QAAAA,EAAUnB;AAAgB,iBAAA,CAAA;AACzE,YAAA;;YAGAD,UAAAA,CAAWiB,MAAAA,CAAAA;AACb,QAAA,CAAA,CAAE,OAAOI,CAAAA,EAAY;YACnBd,QAAAA,CAASc,CAAAA,CAAAA;YACTlB,UAAAA,CAAW,KAAA,CAAA;AACb,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEmB,cAAA,CAACC,aAAAA,EAAAA;QACCC,kBAAkB,EAAA,IAAA;QAClBC,aAAAA,EAAe;YACbX,IAAAA,EAAM;AACR,SAAA;QACAY,QAAAA,EAAUb,YAAAA;QACVc,gBAAAA,EAAkBC,sBAAAA;QAClBC,gBAAAA,EAAkB,KAAA;kBAEjB,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAEC,YAAY,EAAE,iBAChCC,eAAA,CAACC,WAAAA,EAAAA;gBAAKC,UAAU,EAAA,IAAA;;kCACdb,cAAA,CAACc,gBAAAA,EAAAA;wBAAIC,WAAAA,EAAa,CAAA;wBAAGC,YAAAA,EAAc,CAAA;wBAAGC,aAAAA,EAAe,CAAA;wBAAGC,UAAAA,EAAY,CAAA;gDAClEP,eAAA,CAACQ,mBAAMC,IAAI,EAAA;AACTC,4BAAAA,IAAAA,EAAMlC,aAAAA,CAAc;AAClBmC,gCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,uBAAA,CAAA;gCACZC,cAAAA,EAAgB;AAClB,6BAAA,CAAA;AACAxC,4BAAAA,KAAAA,EACEA,OAAOyC,OAAAA,KACNhB,MAAAA,CAAOjB,IAAI,GACRL,aAAAA,CAAc;AAAEmC,gCAAAA,EAAAA,EAAIb,OAAOjB,IAAI;gCAAEgC,cAAAA,EAAgB;~~AAAmB~~,6BAAA,CAAA,~~GACpEtC~~,SAAQ,CAAA;;AAGd,8CAAAc,cAAA,CAACmB,mBAAMO,KAAK,EAAA;8CACTvC,aAAAA,CAAc;AAAEmC,wCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,iBAAA,CAAA;wCAAoBC,cAAAA,EAAgB;AAAM,qCAAA;;8CAEzExB,cAAA,CAAC2B,qBAAAA,EAAAA;oCAASC,IAAAA,EAAK,MAAA;oCAAOC,QAAAA,EAAUnB,YAAAA;AAAcoB,oCAAAA,KAAAA,EAAOtB,OAAOhB;;AAC5D,8CAAAQ,cAAA,CAACmB,mBAAMY,IAAI,EAAA,EAAA,CAAA;AACX,8CAAA/B,cAAA,CAACmB,mBAAMa,KAAK,EAAA,EAAA;;;;AAIhB,kCAAArB,eAAA,CAACsB,mBAAMC,MAAM,EAAA;;0CACXlC,cAAA,CAACmC,mBAAAA,EAAAA;gCAAOC,OAAAA,EAAS3D,OAAAA;gCAAS4D,OAAAA,EAAQ,UAAA;0CAC/BlD,aAAAA,CAAc;oCAAEmC,EAAAA,EAAI,8BAAA;oCAAgCE,cAAAA,EAAgB;AAAS,iCAAA;;0CAEhFxB,cAAA,CAACmC,mBAAAA,EAAAA;gCAAOG,IAAAA,EAAK,QAAA;gCAAS1D,OAAAA,EAASA,OAAAA;0CAC5BO,aAAAA,CAAc;AACbmC,oCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,aAAA,CAAA;oCACZC,cAAAA,EAAgB;AAClB,iCAAA;;;;;;;AAOd;;;;"}
1	+ {"version":3,"file":"FromUrlForm.js","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState<Error \| undefined>(undefined);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const handleSubmit = async ({ urls }: { urls: string }) => {\n setLoading(true);\n const urlArray = urls.split(/\\r?\\n/);\n try {\n const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n }\n\n // no need to set the loading to false since the component unmounts\n onAddAsset(assets);\n } catch (e: unknown) {\n setError(e as Error);\n setLoading(false);\n }\n };\n\n return (\n <Formik\n enableReinitialize\n initialValues={{\n urls: '',\n }}\n onSubmit={handleSubmit}\n validationSchema={urlSchema}\n validateOnChange={false}\n >\n {({ values, errors, handleChange }) => (\n <Form noValidate>\n <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n <Field.Root\n hint={formatMessage({\n id: getTrad('input.url.description'),\n defaultMessage: 'Separate your URL links by a carriage return.',\n })}\n error={\n error?.message \|\|\n (errors.urls\n ? formatMessage({ id: errors.urls, defaultMessage: 'An error occurred' })\n : undefined)\n }\n >\n <Field.Label>\n {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n </Field.Label>\n <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n <Field.Hint />\n <Field.Error />\n </Field.Root>\n </Box>\n\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {formatMessage({\n id: getTrad('button.next'),\n defaultMessage: 'Next',\n })}\n </Button>\n </Modal.Footer>\n </Form>\n )}\n </Formik>\n );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,eAAe,EAAoB,GAAA;AACpF,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGH,gBAAAA,CAAMC,QAAQ,CAAoBG,SAAAA,CAAAA;IAC5D,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,uBAAAA,EAAAA;AAEvB,IAAA,MAAMC,YAAAA,GAAe,OAAO,EAAEC,IAAI,EAAoB,GAAA;QACpDX,UAAAA,CAAW,IAAA,CAAA;QACX,MAAMY,QAAAA,GAAWD,IAAAA,CAAKE,KAAK,CAAC,OAAA,CAAA;QAC5B,IAAI;YACF,MAAMC,MAAAA,GAA4B,MAAMC,yBAAAA,CAAaH,QAAAA,CAAAA;AAErD,YAAA,IAAId,eAAAA,EAAiB;AACnBU,gBAAAA,UAAAA,CAAW,eAAA,EAAiB;oBAAEQ,MAAAA,EAAQ,KAAA;oBAAOC,QAAAA,EAAUnB;AAAgB,iBAAA,CAAA;AACzE,YAAA;;YAGAD,UAAAA,CAAWiB,MAAAA,CAAAA;AACb,QAAA,CAAA,CAAE,OAAOI,CAAAA,EAAY;YACnBd,QAAAA,CAASc,CAAAA,CAAAA;YACTlB,UAAAA,CAAW,KAAA,CAAA;AACb,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEmB,cAAA,CAACC,aAAAA,EAAAA;QACCC,kBAAkB,EAAA,IAAA;QAClBC,aAAAA,EAAe;YACbX,IAAAA,EAAM;AACR,SAAA;QACAY,QAAAA,EAAUb,YAAAA;QACVc,gBAAAA,EAAkBC,sBAAAA;QAClBC,gBAAAA,EAAkB,KAAA;kBAEjB,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAEC,YAAY,EAAE,iBAChCC,eAAA,CAACC,WAAAA,EAAAA;gBAAKC,UAAU,EAAA,IAAA;;kCACdb,cAAA,CAACc,gBAAAA,EAAAA;wBAAIC,WAAAA,EAAa,CAAA;wBAAGC,YAAAA,EAAc,CAAA;wBAAGC,aAAAA,EAAe,CAAA;wBAAGC,UAAAA,EAAY,CAAA;gDAClEP,eAAA,CAACQ,mBAAMC,IAAI,EAAA;AACTC,4BAAAA,IAAAA,EAAMlC,aAAAA,CAAc;AAClBmC,gCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,uBAAA,CAAA;gCACZC,cAAAA,EAAgB;AAClB,6BAAA,CAAA;AACAxC,4BAAAA,KAAAA,EACEA,OAAOyC,OAAAA,KACNhB,MAAAA,CAAOjB,IAAI,GACRL,aAAAA,CAAc;AAAEmC,gCAAAA,EAAAA,EAAIb,OAAOjB,IAAI;gCAAEgC,cAAAA,EAAgB;AAAoB,6BAAA,CAAA,GACrEtC,SAAQ,CAAA;;AAGd,8CAAAc,cAAA,CAACmB,mBAAMO,KAAK,EAAA;8CACTvC,aAAAA,CAAc;AAAEmC,wCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,iBAAA,CAAA;wCAAoBC,cAAAA,EAAgB;AAAM,qCAAA;;8CAEzExB,cAAA,CAAC2B,qBAAAA,EAAAA;oCAASC,IAAAA,EAAK,MAAA;oCAAOC,QAAAA,EAAUnB,YAAAA;AAAcoB,oCAAAA,KAAAA,EAAOtB,OAAOhB;;AAC5D,8CAAAQ,cAAA,CAACmB,mBAAMY,IAAI,EAAA,EAAA,CAAA;AACX,8CAAA/B,cAAA,CAACmB,mBAAMa,KAAK,EAAA,EAAA;;;;AAIhB,kCAAArB,eAAA,CAACsB,mBAAMC,MAAM,EAAA;;0CACXlC,cAAA,CAACmC,mBAAAA,EAAAA;gCAAOC,OAAAA,EAAS3D,OAAAA;gCAAS4D,OAAAA,EAAQ,UAAA;0CAC/BlD,aAAAA,CAAc;oCAAEmC,EAAAA,EAAI,8BAAA;oCAAgCE,cAAAA,EAAgB;AAAS,iCAAA;;0CAEhFxB,cAAA,CAACmC,mBAAAA,EAAAA;gCAAOG,IAAAA,EAAK,QAAA;gCAAS1D,OAAAA,EAASA,OAAAA;0CAC5BO,aAAAA,CAAc;AACbmC,oCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,aAAA,CAAA;oCACZC,cAAAA,EAAgB;AAClB,iCAAA;;;;;;;AAOd;;;;"}

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.mjs CHANGED Viewed

@@ -58,7 +58,7 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
                             }),
                             error: error?.message || (errors.urls ? formatMessage({
                                 id: errors.urls,
-                                defaultMessage: 'An error occured'
+                                defaultMessage: 'An error occurred'
                             }) : undefined),
                             children: [
                                 /*#__PURE__*/ jsx(Field.Label, {

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FromUrlForm.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState<Error \| undefined>(undefined);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const handleSubmit = async ({ urls }: { urls: string }) => {\n setLoading(true);\n const urlArray = urls.split(/\\r?\\n/);\n try {\n const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n }\n\n // no need to set the loading to false since the component unmounts\n onAddAsset(assets);\n } catch (e: unknown) {\n setError(e as Error);\n setLoading(false);\n }\n };\n\n return (\n <Formik\n enableReinitialize\n initialValues={{\n urls: '',\n }}\n onSubmit={handleSubmit}\n validationSchema={urlSchema}\n validateOnChange={false}\n >\n {({ values, errors, handleChange }) => (\n <Form noValidate>\n <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n <Field.Root\n hint={formatMessage({\n id: getTrad('input.url.description'),\n defaultMessage: 'Separate your URL links by a carriage return.',\n })}\n error={\n error?.message \|\|\n (errors.urls\n ? formatMessage({ id: errors.urls, defaultMessage: 'An error ~~occured~~' })\n : undefined)\n }\n >\n <Field.Label>\n {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n </Field.Label>\n <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n <Field.Hint />\n <Field.Error />\n </Field.Root>\n </Box>\n\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {formatMessage({\n id: getTrad('button.next'),\n defaultMessage: 'Next',\n })}\n </Button>\n </Modal.Footer>\n </Form>\n )}\n </Formik>\n );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":";;;;;;;;;;;;;;AAiBO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,eAAe,EAAoB,GAAA;AACpF,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGH,KAAAA,CAAMC,QAAQ,CAAoBG,SAAAA,CAAAA;IAC5D,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;AAEvB,IAAA,MAAMC,YAAAA,GAAe,OAAO,EAAEC,IAAI,EAAoB,GAAA;QACpDX,UAAAA,CAAW,IAAA,CAAA;QACX,MAAMY,QAAAA,GAAWD,IAAAA,CAAKE,KAAK,CAAC,OAAA,CAAA;QAC5B,IAAI;YACF,MAAMC,MAAAA,GAA4B,MAAMC,YAAAA,CAAaH,QAAAA,CAAAA;AAErD,YAAA,IAAId,eAAAA,EAAiB;AACnBU,gBAAAA,UAAAA,CAAW,eAAA,EAAiB;oBAAEQ,MAAAA,EAAQ,KAAA;oBAAOC,QAAAA,EAAUnB;AAAgB,iBAAA,CAAA;AACzE,YAAA;;YAGAD,UAAAA,CAAWiB,MAAAA,CAAAA;AACb,QAAA,CAAA,CAAE,OAAOI,CAAAA,EAAY;YACnBd,QAAAA,CAASc,CAAAA,CAAAA;YACTlB,UAAAA,CAAW,KAAA,CAAA;AACb,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEmB,GAAA,CAACC,MAAAA,EAAAA;QACCC,kBAAkB,EAAA,IAAA;QAClBC,aAAAA,EAAe;YACbX,IAAAA,EAAM;AACR,SAAA;QACAY,QAAAA,EAAUb,YAAAA;QACVc,gBAAAA,EAAkBC,SAAAA;QAClBC,gBAAAA,EAAkB,KAAA;kBAEjB,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAEC,YAAY,EAAE,iBAChCC,IAAA,CAACC,IAAAA,EAAAA;gBAAKC,UAAU,EAAA,IAAA;;kCACdb,GAAA,CAACc,GAAAA,EAAAA;wBAAIC,WAAAA,EAAa,CAAA;wBAAGC,YAAAA,EAAc,CAAA;wBAAGC,aAAAA,EAAe,CAAA;wBAAGC,UAAAA,EAAY,CAAA;gDAClEP,IAAA,CAACQ,MAAMC,IAAI,EAAA;AACTC,4BAAAA,IAAAA,EAAMlC,aAAAA,CAAc;AAClBmC,gCAAAA,EAAAA,EAAIC,OAAAA,CAAQ,uBAAA,CAAA;gCACZC,cAAAA,EAAgB;AAClB,6BAAA,CAAA;AACAxC,4BAAAA,KAAAA,EACEA,OAAOyC,OAAAA,KACNhB,MAAAA,CAAOjB,IAAI,GACRL,aAAAA,CAAc;AAAEmC,gCAAAA,EAAAA,EAAIb,OAAOjB,IAAI;gCAAEgC,cAAAA,EAAgB;~~AAAmB~~,6BAAA,CAAA,~~GACpEtC~~,SAAQ,CAAA;;AAGd,8CAAAc,GAAA,CAACmB,MAAMO,KAAK,EAAA;8CACTvC,aAAAA,CAAc;AAAEmC,wCAAAA,EAAAA,EAAIC,OAAAA,CAAQ,iBAAA,CAAA;wCAAoBC,cAAAA,EAAgB;AAAM,qCAAA;;8CAEzExB,GAAA,CAAC2B,QAAAA,EAAAA;oCAASC,IAAAA,EAAK,MAAA;oCAAOC,QAAAA,EAAUnB,YAAAA;AAAcoB,oCAAAA,KAAAA,EAAOtB,OAAOhB;;AAC5D,8CAAAQ,GAAA,CAACmB,MAAMY,IAAI,EAAA,EAAA,CAAA;AACX,8CAAA/B,GAAA,CAACmB,MAAMa,KAAK,EAAA,EAAA;;;;AAIhB,kCAAArB,IAAA,CAACsB,MAAMC,MAAM,EAAA;;0CACXlC,GAAA,CAACmC,MAAAA,EAAAA;gCAAOC,OAAAA,EAAS3D,OAAAA;gCAAS4D,OAAAA,EAAQ,UAAA;0CAC/BlD,aAAAA,CAAc;oCAAEmC,EAAAA,EAAI,8BAAA;oCAAgCE,cAAAA,EAAgB;AAAS,iCAAA;;0CAEhFxB,GAAA,CAACmC,MAAAA,EAAAA;gCAAOG,IAAAA,EAAK,QAAA;gCAAS1D,OAAAA,EAASA,OAAAA;0CAC5BO,aAAAA,CAAc;AACbmC,oCAAAA,EAAAA,EAAIC,OAAAA,CAAQ,aAAA,CAAA;oCACZC,cAAAA,EAAgB;AAClB,iCAAA;;;;;;;AAOd;;;;"}
1	+ {"version":3,"file":"FromUrlForm.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState<Error \| undefined>(undefined);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const handleSubmit = async ({ urls }: { urls: string }) => {\n setLoading(true);\n const urlArray = urls.split(/\\r?\\n/);\n try {\n const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n }\n\n // no need to set the loading to false since the component unmounts\n onAddAsset(assets);\n } catch (e: unknown) {\n setError(e as Error);\n setLoading(false);\n }\n };\n\n return (\n <Formik\n enableReinitialize\n initialValues={{\n urls: '',\n }}\n onSubmit={handleSubmit}\n validationSchema={urlSchema}\n validateOnChange={false}\n >\n {({ values, errors, handleChange }) => (\n <Form noValidate>\n <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n <Field.Root\n hint={formatMessage({\n id: getTrad('input.url.description'),\n defaultMessage: 'Separate your URL links by a carriage return.',\n })}\n error={\n error?.message \|\|\n (errors.urls\n ? formatMessage({ id: errors.urls, defaultMessage: 'An error occurred' })\n : undefined)\n }\n >\n <Field.Label>\n {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n </Field.Label>\n <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n <Field.Hint />\n <Field.Error />\n </Field.Root>\n </Box>\n\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {formatMessage({\n id: getTrad('button.next'),\n defaultMessage: 'Next',\n })}\n </Button>\n </Modal.Footer>\n </Form>\n )}\n </Formik>\n );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":"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"}

package/dist/admin/hooks/useTracking.js CHANGED Viewed

@@ -12,7 +12,7 @@ const useTracking = ()=>{
         return trackStrapiUsage(event, {
             ...properties,
             ...isAiAvailable ? {
-                isAIMediaLibraryConfigured: Boolean(data?.aiMetadata)
+                isAiMediaLibraryConfigured: Boolean(data?.aiMetadata)
             } : {}
         });
     };

package/dist/admin/hooks/useTracking.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTracking.js","sources":["../../../admin/src/hooks/useTracking.ts"],"sourcesContent":["import { useTracking as useStrapiTracking, TrackingEvent } from '@strapi/admin/strapi-admin';\nimport { useAIAvailability } from '@strapi/admin/strapi-admin/ee';\n\nimport { useSettings } from '../hooks/useSettings';\n\nexport const useTracking = () => {\n const { trackUsage: trackStrapiUsage } = useStrapiTracking();\n const { data } = useSettings();\n const isAiAvailable = useAIAvailability();\n\n const trackUsage = <TEvent extends TrackingEvent>(\n event: TEvent['name'],\n properties?: TEvent['properties']\n ) => {\n return trackStrapiUsage(event, {\n ...properties,\n ...(isAiAvailable ? { ~~isAIMediaLibraryConfigured~~: Boolean(data?.aiMetadata) } : {}),\n } as TEvent['properties']);\n };\n\n return { trackUsage };\n};\n"],"names":["useTracking","trackUsage","trackStrapiUsage","useStrapiTracking","data","useSettings","isAiAvailable","useAIAvailability","event","properties","~~isAIMediaLibraryConfigured~~","Boolean","aiMetadata"],"mappings":";;;;;;MAKaA,WAAAA,GAAc,IAAA;AACzB,IAAA,MAAM,EAAEC,UAAAA,EAAYC,gBAAgB,EAAE,GAAGC,uBAAAA,EAAAA;IACzC,MAAM,EAAEC,IAAI,EAAE,GAAGC,uBAAAA,EAAAA;AACjB,IAAA,MAAMC,aAAAA,GAAgBC,oBAAAA,EAAAA;IAEtB,MAAMN,UAAAA,GAAa,CACjBO,KAAAA,EACAC,UAAAA,GAAAA;AAEA,QAAA,OAAOP,iBAAiBM,KAAAA,EAAO;AAC7B,YAAA,GAAGC,UAAU;AACb,YAAA,GAAIH,aAAAA,GAAgB;AAAEI,gBAAAA,0BAAAA,EAA4BC,QAAQP,IAAAA,EAAMQ,UAAAA;AAAY,aAAA,GAAI;AAClF,SAAA,CAAA;AACF,IAAA,CAAA;IAEA,OAAO;AAAEX,QAAAA;AAAW,KAAA;AACtB;;;;"}
1	+ {"version":3,"file":"useTracking.js","sources":["../../../admin/src/hooks/useTracking.ts"],"sourcesContent":["import { useTracking as useStrapiTracking, TrackingEvent } from '@strapi/admin/strapi-admin';\nimport { useAIAvailability } from '@strapi/admin/strapi-admin/ee';\n\nimport { useSettings } from '../hooks/useSettings';\n\nexport const useTracking = () => {\n const { trackUsage: trackStrapiUsage } = useStrapiTracking();\n const { data } = useSettings();\n const isAiAvailable = useAIAvailability();\n\n const trackUsage = <TEvent extends TrackingEvent>(\n event: TEvent['name'],\n properties?: TEvent['properties']\n ) => {\n return trackStrapiUsage(event, {\n ...properties,\n ...(isAiAvailable ? { isAiMediaLibraryConfigured: Boolean(data?.aiMetadata) } : {}),\n } as TEvent['properties']);\n };\n\n return { trackUsage };\n};\n"],"names":["useTracking","trackUsage","trackStrapiUsage","useStrapiTracking","data","useSettings","isAiAvailable","useAIAvailability","event","properties","isAiMediaLibraryConfigured","Boolean","aiMetadata"],"mappings":";;;;;;MAKaA,WAAAA,GAAc,IAAA;AACzB,IAAA,MAAM,EAAEC,UAAAA,EAAYC,gBAAgB,EAAE,GAAGC,uBAAAA,EAAAA;IACzC,MAAM,EAAEC,IAAI,EAAE,GAAGC,uBAAAA,EAAAA;AACjB,IAAA,MAAMC,aAAAA,GAAgBC,oBAAAA,EAAAA;IAEtB,MAAMN,UAAAA,GAAa,CACjBO,KAAAA,EACAC,UAAAA,GAAAA;AAEA,QAAA,OAAOP,iBAAiBM,KAAAA,EAAO;AAC7B,YAAA,GAAGC,UAAU;AACb,YAAA,GAAIH,aAAAA,GAAgB;AAAEI,gBAAAA,0BAAAA,EAA4BC,QAAQP,IAAAA,EAAMQ,UAAAA;AAAY,aAAA,GAAI;AAClF,SAAA,CAAA;AACF,IAAA,CAAA;IAEA,OAAO;AAAEX,QAAAA;AAAW,KAAA;AACtB;;;;"}

package/dist/admin/hooks/useTracking.mjs CHANGED Viewed

@@ -10,7 +10,7 @@ const useTracking = ()=>{
         return trackStrapiUsage(event, {
             ...properties,
             ...isAiAvailable ? {
-                isAIMediaLibraryConfigured: Boolean(data?.aiMetadata)
+                isAiMediaLibraryConfigured: Boolean(data?.aiMetadata)
             } : {}
         });
     };