@strapi/upload 5.56.0 → 5.58.0

package/dist/admin/legacy/components/EditAssetDialog/PreviewBox/PreviewBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewBox.mjs","sources":["../../../../../../admin/src/legacy/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 { ASSET_TYPES } 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(ASSET_TYPES.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(ASSET_TYPES.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","ASSET_TYPES","Image","Resize","PinMap","Wrapper","UploadProgressWrapper","UploadProgress","FocalPointImageWrapper","AssetPreview","ref","onLoad","style","cursor","FocalPointAim","$focalPoint","FocalPointHalo","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AA8DO,MAAMA,UAAAA,GAAa,CAAC,EACzBC,KAAK,EACLC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EACF,GAAA;AAChB,IAAA,MAAMC,cAAAA,GAAiBC,iBAAiB,CAAC,EAAEC,aAAa,CAAC;IACzD,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAMC,UAAAA,GAAaC,KAAAA,CAAMC,MAAM,CAAC,IAAA,CAAA;AAChC,IAAA,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGH,KAAAA,CAAMI,QAAQ,CAAC,KAAA,CAAA;AAC/D,IAAA,MAAM,CAACC,aAAAA,EAAeC,gBAAAA,CAAiB,GAAGN,KAAAA,CAAMI,QAAQ,CAAiB,IAAA,CAAA;IACzE,MAAM,CAACG,UAAUC,WAAAA,CAAY,GAAGR,MAAMI,QAAQ,CAACK,eAAe7B,KAAAA,EAAO,KAAA,CAAA,CAAA;IACrE,MAAM,CAAC8B,cAAcC,eAAAA,CAAgB,GAAGX,MAAMI,QAAQ,CAACK,eAAe7B,KAAAA,EAAO,IAAA,CAAA,CAAA;;;;;IAM7E,MAAMgC,OAAAA,GAAUZ,KAAAA,CAAMa,OAAO,CAAC,IAAA;QAC5B,IAAI,CAACjC,MAAMkC,OAAO,IAAI,CAAClC,KAAAA,CAAMmC,WAAW,IAAIR,QAAAA,EAAU;AACpD,YAAA,OAAOS,uBAAAA,CAAwB;gBAAEC,GAAAA,EAAKV,QAAAA;gBAAUW,MAAAA,EAAQ;AAAEC,oBAAAA,SAAAA,EAAWvC,MAAMuC;AAAU;AAAE,aAAA,CAAA;AACzF,QAAA;QAEA,OAAOZ,QAAAA;IACT,CAAA,EAAG;AAACA,QAAAA,QAAAA;AAAU3B,QAAAA,KAAAA,CAAMkC,OAAO;AAAElC,QAAAA,KAAAA,CAAMmC,WAAW;AAAEnC,QAAAA,KAAAA,CAAMuC;AAAU,KAAA,CAAA;IAEhE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,iBAAAA,EAAmBC,oBAAAA,CAAqB,GAAGvB,KAAAA,CAAMI,QAAQ,CAAC,KAAA,CAAA;AACjE,IAAA,MAAM,EAAEoB,IAAI,EAAEC,WAAW,EAAEC,YAAY,EAAEC,UAAU,EAAEC,cAAc,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAClFC,UAAAA,EAAAA;IACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGC,YAAAA,EAAAA;AAC1D,IAAA,MAAM,CAACC,kBAAAA,EAAoBC,qBAAAA,CAAsB,GAAGvC,KAAAA,CAAMI,QAAQ,CAAU,KAAA,CAAA;AAC5E,IAAA,MAAM,CAACoC,UAAAA,EAAYC,aAAAA,CAAc,GAAGzC,KAAAA,CAAMI,QAAQ,CAChDd,cAAAA,IAAkB;QAAEoD,CAAAA,EAAG,EAAA;QAAIC,CAAAA,EAAG;AAAG,KAAA,CAAA;AAGnC,IAAA,MAAM,EACJC,MAAM,EACNV,SAAAA,EAAWW,eAAe,EAC1BT,MAAAA,EAAQU,YAAY,EACpBb,OAAOc,WAAW,EAClBZ,QAAAA,EAAUa,cAAc,EACzB,GAAGC,SAAAA,EAAAA;AAEJjD,IAAAA,KAAAA,CAAMkD,SAAS,CAAC,IAAA;;;AAGd,QAAA,IAAI9D,eAAAA,EAAiB;YACnB,MAAM+D,YAAAA,GAAeC,GAAAA,CAAIC,eAAe,CAACjE,eAAAA,CAAAA;YAEzC,IAAIR,KAAAA,CAAMkC,OAAO,EAAE;AACjBlC,gBAAAA,KAAAA,CAAMqC,GAAG,GAAGkC,YAAAA;AACd,YAAA;YAEA3C,WAAAA,CAAY2C,YAAAA,CAAAA;YACZxC,eAAAA,CAAgBwC,YAAAA,CAAAA;AAClB,QAAA;IACF,CAAA,EAAG;AAAC/D,QAAAA,eAAAA;AAAiBR,QAAAA;AAAM,KAAA,CAAA;AAE3BoB,IAAAA,KAAAA,CAAMkD,SAAS,CAAC,IAAA;AACd,QAAA,IAAI7C,kBAAkB,KAAA,EAAO;AAC3BqB,YAAAA,YAAAA,EAAAA;AACAvC,YAAAA,YAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;AAACkB,QAAAA,aAAAA;AAAeqB,QAAAA,YAAAA;AAAcvC,QAAAA,YAAAA;AAAcF,QAAAA;AAAa,KAAA,CAAA;AAE5De,IAAAA,KAAAA,CAAMkD,SAAS,CAAC,IAAA;AACd,QAAA,IAAI7C,iBAAiBH,gBAAAA,EAAkB;AACrCsB,YAAAA,IAAAA,CAAKzB,WAAWuD,OAAO,CAAA;AACvBpE,YAAAA,WAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;AAACgB,QAAAA,gBAAAA;AAAkBG,QAAAA,aAAAA;AAAenB,QAAAA,WAAAA;AAAasC,QAAAA;AAAK,KAAA,CAAA;AAEvD,IAAA,MAAM+B,cAAAA,GAAiB,UAAA;AACrB,QAAA,MAAMC,SAAAA,GAAY;AAAE,YAAA,GAAG5E,KAAK;AAAEiD,YAAAA,KAAAA;AAAOC,YAAAA,MAAAA;YAAQ2B,MAAAA,EAAQ7E,KAAAA,CAAM6E,MAAM,EAAEC;AAAG,SAAA;QACtE,MAAMC,IAAAA,GAAQ,MAAMlC,WAAAA,CAAY+B,SAAAA,CAAUI,IAAI,EAAEJ,SAAAA,CAAUK,IAAI,EAAGL,SAAAA,CAAUrC,SAAS,CAAA;;;QAIpF,IAAI2C,qBAAAA;QACJ,IAAIC,8BAAAA;QAEJ,IAAInF,KAAAA,CAAMkC,OAAO,EAAE;YACjBgD,qBAAAA,GAAwBV,GAAAA,CAAIC,eAAe,CAACM,IAAAA,CAAAA;YAC5CI,8BAAAA,GAAiCD,qBAAAA;AACjClF,YAAAA,KAAAA,CAAMqC,GAAG,GAAG6C,qBAAAA;AACZlF,YAAAA,KAAAA,CAAMoF,OAAO,GAAGL,IAAAA;AAEhB9D,YAAAA,UAAAA,CAAW,aAAA,EAAe;gBAAEoE,cAAAA,EAAgB,IAAA;gBAAMC,QAAAA,EAAU7E;AAAiB,aAAA,CAAA;QAC/E,CAAA,MAAO;YACL,MAAM8E,YAAAA,GAAe,MAAMnC,SAAAA,CAAUwB,SAAAA,EAAWG,IAAAA,CAAAA;AAChDG,YAAAA,qBAAAA,GAAwBrD,eAAe0D,YAAAA,EAAc,KAAA,CAAA;AACrDJ,YAAAA,8BAAAA,GAAiCtD,eAAe0D,YAAAA,EAAc,IAAA,CAAA;AAE9DtE,YAAAA,UAAAA,CAAW,aAAA,EAAe;gBAAEoE,cAAAA,EAAgB,KAAA;gBAAOC,QAAAA,EAAU7E;AAAiB,aAAA,CAAA;AAChF,QAAA;QAEAmB,WAAAA,CAAYsD,qBAAAA,CAAAA;QACZnD,eAAAA,CAAgBoD,8BAAAA,CAAAA;QAChBzD,gBAAAA,CAAiB,KAAA,CAAA;AACnB,IAAA,CAAA;IAEA,MAAM8D,gBAAAA,GAAmBzC,cAAc,CAACO,SAAAA;AAExC,IAAA,MAAMmC,iBAAAA,GAAoB,UAAA;AACxB,QAAA,MAAMb,SAAAA,GAAY;AAAE,YAAA,GAAG5E,KAAqB,CAAA;QAC5C,MAAM+E,IAAAA,GAAQ,MAAMlC,WAAAA,CAClB+B,SAAAA,CAAUI,IAAI,EACdJ,SAAAA,CAAUK,IAAI,EACdL,SAAAA,CAAUrC,SAAS,CAAA;AAGrB,QAAA,MAAMyB,MAAAA,CAAO;AAAEgB,YAAAA,IAAAA,EAAMD,KAAKC,IAAI;YAAEI,OAAAA,EAASL;SAAK,EAAG/E,KAAAA,CAAM6E,MAAM,EAAEC,EAAAA,GAAK9E,MAAM6E,MAAM,CAACC,EAAE,GAAG,IAAA,CAAA;AAEtF7D,QAAAA,UAAAA,CAAW,aAAA,EAAe;YAAEoE,cAAAA,EAAgB,IAAA;YAAMC,QAAAA,EAAU7E;AAAiB,SAAA,CAAA;QAE7EiB,gBAAAA,CAAiB,KAAA,CAAA;AACjBrB,QAAAA,YAAAA,EAAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMqF,gBAAAA,GAAmB,IAAA;QACvBhE,gBAAAA,CAAiB,KAAA,CAAA;AACnB,IAAA,CAAA;AAEA,IAAA,MAAMiE,eAAAA,GAAkB,IAAA;QACtBjE,gBAAAA,CAAiB,IAAA,CAAA;AACnB,IAAA,CAAA;AAEA,IAAA,MAAMkE,+BAA+B,CAACC,CAAAA,GAAAA;AACpC,QAAA,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGF,CAAAA;AAC7B,QAAA,MAAMG,IAAAA,GAAOH,CAAAA,CAAEI,aAAa,CAACC,qBAAqB,EAAA;QAClD,MAAMC,IAAAA,GAAOL,OAAAA,GAAUE,IAAAA,CAAKI,IAAI;QAChC,MAAMC,IAAAA,GAAON,OAAAA,GAAUC,IAAAA,CAAKM,GAAG;QAE/B,OAAO;YACLxC,CAAAA,EAAGyC,MAAAA,CAAO,CAAC,IAACJ,GAAOH,IAAAA,CAAK/C,KAAK,GAAI,GAAE,EAAGuD,OAAO,CAAC,CAAA,CAAA,CAAA;YAC9CzC,CAAAA,EAAGwC,MAAAA,CAAO,CAAC,IAACF,GAAOL,IAAAA,CAAK9C,MAAM,GAAI,GAAE,EAAGsD,OAAO,CAAC,CAAA,CAAA;AACjD,SAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMC,wBAAwB,CAACZ,CAAAA,GAAAA;AAC7B,QAAA,IAAI,CAACnC,kBAAAA,EAAoB;AACzBG,QAAAA,aAAAA,CAAc+B,4BAAAA,CAA6BC,CAAAA,CAAAA,CAAAA;AAC7C,IAAA,CAAA;AAEA,IAAA,MAAMa,sBAAAA,GAAyB,IAAA;QAC7B/C,qBAAAA,CAAsB,KAAA,CAAA;AACtBE,QAAAA,aAAAA,CAAcnD,cAAAA,IAAkB;YAAEoD,CAAAA,EAAG,EAAA;YAAIC,CAAAA,EAAG;AAAG,SAAA,CAAA;AAC/ClD,QAAAA,kBAAAA,EAAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAM8F,qBAAAA,GAAwB,IAAA;AAC5BhG,QAAAA,iBAAAA,EAAAA;QACAgD,qBAAAA,CAAsB,IAAA,CAAA;AACxB,IAAA,CAAA;AAEA,IAAA,MAAMiD,wBAAAA,GAA2B,IAAA;QAC/BjD,qBAAAA,CAAsB,KAAA,CAAA;QACtB/C,kBAAAA,CAAmBgD,UAAAA,CAAAA;AACrB,IAAA,CAAA;AAEA,IAAA,MAAMiD,qBAAAA,GAAwB,IAAA;QAC5BhD,aAAAA,CAAc;YAAEC,CAAAA,EAAG,EAAA;YAAIC,CAAAA,EAAG;AAAG,SAAA,CAAA;AAC/B,IAAA,CAAA;IAEA,qBACE+C,IAAA,CAAAC,QAAA,EAAA;;0BACEC,GAAA,CAAClG,cAAAA,EAAAA,EAAAA,CAAAA;0BACDgG,IAAA,CAACG,WAAAA,EAAAA;gBAAYC,SAAS,EAAA,IAAA;gBAACC,UAAAA,EAAW,YAAA;gBAAaC,WAAAA,EAAY,YAAA;;AACxDpE,oBAAAA,cAAAA,IAAkBwC,kCACjBwB,GAAA,CAACK,eAAAA,EAAAA;wBACCC,UAAAA,EAAY3C,cAAAA;wBACZ4C,WAAAA,EAAavH,KAAAA,CAAMkC,OAAO,GAAGsF,SAAAA,GAAY/B,iBAAAA;wBACzCgC,QAAAA,EAAU/B;;AAIbhC,oBAAAA,kBAAAA,kBACCsD,GAAA,CAACU,iBAAAA,EAAAA;wBACCJ,UAAAA,EAAYV,wBAAAA;wBACZa,QAAAA,EAAUf,sBAAAA;wBACViB,OAAAA,EAASd;;kCAIbG,GAAA,CAACY,SAAAA,EAAAA;wBAAUC,WAAAA,EAAa,CAAA;wBAAGC,YAAAA,EAAc,CAAA;wBAAGC,cAAAA,EAAe,UAAA;AACzD,wBAAA,QAAA,gBAAAjB,IAAA,CAACkB,IAAAA,EAAAA;4BAAKC,GAAAA,EAAK,CAAA;;AACRhI,gCAAAA,SAAAA,IAAa,CAACD,KAAAA,CAAMkC,OAAO,kBAC1B8E,GAAA,CAACkB,UAAAA,EAAAA;AACCC,oCAAAA,KAAAA,EAAO3F,aAAAA,CAAc;wCACnBsC,EAAAA,EAAI,eAAA;wCACJsD,cAAAA,EAAgB;AAClB,qCAAA,CAAA;AACAC,oCAAAA,OAAAA,EAAS,IAAM1F,oBAAAA,CAAqB,IAAA,CAAA;AAEpC,oCAAA,QAAA,gBAAAqE,GAAA,CAACsB,KAAAA,EAAAA,EAAAA;;AAIJnI,gCAAAA,WAAAA,kBACC6G,GAAA,CAACkB,UAAAA,EAAAA;AACCC,oCAAAA,KAAAA,EAAO3F,aAAAA,CAAc;AACnBsC,wCAAAA,EAAAA,EAAIyD,OAAAA,CAAQ,uBAAA,CAAA;wCACZH,cAAAA,EAAgB;AAClB,qCAAA,CAAA;AACAC,oCAAAA,OAAAA,EAAS,IAAMG,YAAAA,CAAa7G,QAAAA,EAAW3B,KAAAA,CAAMgF,IAAI,CAAA;AAEjD,oCAAA,QAAA,gBAAAgC,GAAA,CAACyB,QAAAA,EAAAA,EAAAA;;AAIJvI,gCAAAA,WAAAA,kBAAe8G,GAAA,CAAC0B,cAAAA,EAAAA;oCAAerG,GAAAA,EAAKV;;AAEpC1B,gCAAAA,SAAAA,IAAaD,MAAMiF,IAAI,EAAE0D,SAASC,WAAAA,CAAYC,KAAK,mBAClD7B,GAAA,CAACkB,UAAAA,EAAAA;AACCC,oCAAAA,KAAAA,EAAO3F,aAAAA,CAAc;AAAEsC,wCAAAA,EAAAA,EAAIyD,OAAAA,CAAQ,mBAAA,CAAA;wCAAsBH,cAAAA,EAAgB;AAAO,qCAAA,CAAA;oCAChFC,OAAAA,EAAS1C,eAAAA;AAET,oCAAA,QAAA,gBAAAqB,GAAA,CAAC8B,IAAAA,EAAAA,EAAAA;;AAIJ7I,gCAAAA,SAAAA,IAAaD,MAAMiF,IAAI,EAAE0D,SAASC,WAAAA,CAAYC,KAAK,mBAClD7B,GAAA,CAACkB,UAAAA,EAAAA;AACCC,oCAAAA,KAAAA,EAAO3F,aAAAA,CAAc;AACnBsC,wCAAAA,EAAAA,EAAIyD,OAAAA,CAAQ,8BAAA,CAAA;wCACZH,cAAAA,EAAgB;AAClB,qCAAA,CAAA;oCACAC,OAAAA,EAAS1B,qBAAAA;AAET,oCAAA,QAAA,gBAAAK,GAAA,CAAC+B,MAAAA,EAAAA,EAAAA;;;;;kCAMTjC,IAAA,CAACkC,OAAAA,EAAAA;;AAEE1F,4BAAAA,SAAAA,kBACC0D,GAAA,CAACiC,qBAAAA,EAAAA;AACC,gCAAA,QAAA,gBAAAjC,GAAA,CAACkC,cAAAA,EAAAA;oCAAe7F,KAAAA,EAAOA,KAAAA;oCAAOoE,QAAAA,EAAUjE,MAAAA;oCAAQD,QAAAA,EAAUA;;;AAK7DU,4BAAAA,eAAAA,kBACC+C,GAAA,CAACiC,qBAAAA,EAAAA;AACC,gCAAA,QAAA,gBAAAjC,GAAA,CAACkC,cAAAA,EAAAA;oCACC7F,KAAAA,EAAOc,WAAAA;oCACPsD,QAAAA,EAAUvD,YAAAA;oCACVX,QAAAA,EAAUa;;;0CAKhB0C,IAAA,CAACqC,sBAAAA,EAAAA;;kDACCnC,GAAA,CAACoC,YAAAA,EAAAA;wCACCC,GAAAA,EAAKlI,UAAAA;AACL8D,wCAAAA,IAAAA,EAAMjF,MAAMiF,IAAI;AAChBD,wCAAAA,IAAAA,EAAMhF,MAAMgF,IAAI;AAChB3C,wCAAAA,GAAAA,EAAKZ,gBAAgBO,OAAAA,GAAWF,YAAAA;wCAChCwH,MAAAA,EAAQ,IAAA;4CACN,IAAItJ,KAAAA,CAAMkC,OAAO,IAAIT,aAAAA,EAAe;gDAClCF,mBAAAA,CAAoB,IAAA,CAAA;AACtB,4CAAA;AACF,wCAAA,CAAA;wCACA8G,OAAAA,EAAS5B,qBAAAA;wCACT8C,KAAAA,EAAO;AAAEC,4CAAAA,MAAAA,EAAQ9F,qBAAqB,WAAA,GAAc8D;AAAU;;AAI/D9D,oCAAAA,kBAAAA,kBACCsD,GAAA,CAACyC,aAAAA,EAAAA;wCAAcC,WAAAA,EAAa9F,UAAAA;AAC1B,wCAAA,QAAA,gBAAAoD,GAAA,CAAC2C,cAAAA,EAAAA,EAAAA;;;;;;kCAMT7C,IAAA,CAACc,SAAAA,EAAAA;wBACCC,WAAAA,EAAa,CAAA;wBACbC,YAAAA,EAAc,CAAA;wBACdC,cAAAA,EAAe,UAAA;AACf6B,wBAAAA,OAAAA,EAASpE,gBAAAA,IAAoB9B,kBAAAA;;4BAE5B8B,gBAAAA,IAAoBvC,KAAAA,IAASC,wBAC5B8D,GAAA,CAAC6C,aAAAA,EAAAA;gCAAc1C,UAAAA,EAAW,YAAA;gCAAa2C,KAAAA,EAAM,UAAA;AAC1C7G,gCAAAA,QAAAA,EAAAA,KAAAA,IAASC,SAAS,CAAA,EAAGA,MAAAA,CAAO,CAAC,EAAED,OAAO,GAAG;;AAG7CS,4BAAAA,kBAAAA,kBACCsD,GAAA,CAAC6C,aAAAA,EAAAA;gCAAc1C,UAAAA,EAAW,YAAA;gCAAa2C,KAAAA,EAAM,UAAA;0CAC1C,CAAC,GAAG,EAAElG,UAAAA,CAAWE,CAAC,CAAC,OAAO,EAAEF,UAAAA,CAAWG,CAAC,CAAC,CAAC;;;;;;0BAMnDiD,GAAA,CAAC+C,iBAAAA,EAAAA;gBACCC,IAAAA,EAAMtH,iBAAAA;AACNuH,gBAAAA,OAAAA,EAAS,CAACC,KAAAA,GAAAA;oBACRvH,oBAAAA,CAAqB,KAAA,CAAA;AACrB,oBAAA,IAAIuH,UAAU,IAAA,EAAM;wBAClB9J,QAAAA,CAAS,IAAA,CAAA;AACX,oBAAA;AACF,gBAAA,CAAA;gBACAJ,KAAAA,EAAOA;;;;AAIf;;;;"}
+{"version":3,"file":"PreviewBox.mjs","sources":["../../../../../../admin/src/legacy/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 { isAbortError } from '@strapi/admin/strapi-admin';\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 { ASSET_TYPES } from '../../../../enums';\nimport { UploadAbortedError } from '../../../../services/uploadFileViaXHR';\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      let updatedAsset;\n\n      try {\n        updatedAsset = await editAsset(nextAsset, file);\n      } catch (error) {\n        // The user cancelled the edit: nothing to report.\n        if (isAbortError(error)) return;\n\n        throw error;\n      }\n\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    try {\n      await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n    } catch (error) {\n      // The user cancelled the upload: nothing to report.\n      if (error instanceof UploadAbortedError) return;\n\n      throw error;\n    }\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(ASSET_TYPES.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(ASSET_TYPES.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","isAbortError","isInCroppingMode","handleDuplication","UploadAbortedError","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","ASSET_TYPES","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/legacy/hooks/useEditAsset.js

@@ -57,10 +57,14 @@ const useEditAsset = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { toggleNotification } = strapiAdmin.useNotification();
     const queryClient = reactQuery.useQueryClient();
-    const abortController = new AbortController();
-    const signal = abortController.signal;
+    const abortControllerRef = React__namespace.useRef(null);
     const { post } = strapiAdmin.useFetchClient();
-    const mutation = reactQuery.useMutation(({ asset, file })=>editAssetRequest(asset, file, signal, setProgress, post), {
+    const mutation = reactQuery.useMutation(({ asset, file })=>{
+        // One controller per request, so `cancel` reaches it after the hook re-renders.
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        return editAssetRequest(asset, file, abortController.signal, setProgress, post);
+    }, {
         onSuccess () {
             queryClient.refetchQueries([
                 pluginId.pluginId,
@@ -82,7 +86,8 @@ const useEditAsset = ()=>{
             });
         },
         onError (reason) {
-            if (reason?.response?.status === 403) {
+            if (strapiAdmin.isAbortError(reason) || abortControllerRef.current?.signal.aborted) return;
+            if (strapiAdmin.isFetchError(reason) && reason.status === 403) {
                 toggleNotification({
                     type: 'info',
                     message: formatMessage({
@@ -92,7 +97,7 @@ const useEditAsset = ()=>{
             } else {
                 toggleNotification({
                     type: 'danger',
-                    message: reason?.message
+                    message: reason.message
                 });
             }
         }
@@ -101,7 +106,7 @@ const useEditAsset = ()=>{
             asset,
             file
         });
-    const cancel = ()=>abortController.abort();
+    const cancel = ()=>abortControllerRef.current?.abort();
     return {
         ...mutation,
         cancel,

package/dist/admin/legacy/hooks/useEditAsset.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditAsset.js","sources":["../../../../admin/src/legacy/hooks/useEditAsset.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useNotification, useFetchClient, FetchClient } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { useMutation, useQueryClient } from 'react-query';\n\nimport { UpdateFile, File as FileAsset } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { getTrad } from '../utils';\n\nexport type ErrorMutation = {\n  message: string;\n  response: {\n    status: number;\n    data: {\n      error: Error;\n    };\n  };\n} | null;\n\nconst editAssetRequest = (\n  asset: FileAsset,\n  file: File,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  post: FetchClient['post']\n): Promise<UpdateFile.Response['data']> => {\n  const endpoint = `/${pluginId}?id=${asset.id}`;\n\n  const formData = new FormData();\n\n  if (file) {\n    formData.append('files', file);\n  }\n\n  formData.append(\n    'fileInfo',\n    JSON.stringify({\n      alternativeText: asset.alternativeText,\n      caption: asset.caption,\n      focalPoint: asset.focalPoint,\n      folder: asset.folder,\n      name: asset.name,\n    })\n  );\n\n  /**\n   * onProgress is not possible using native fetch\n   * need to look into an alternative to make it work\n   * perhaps using xhr like Axios does\n   */\n  return post<UpdateFile.Response['data'], UpdateFile.Request['body']>(endpoint, formData, {\n    signal,\n  }).then((res) => res.data);\n};\n\nexport const useEditAsset = () => {\n  const [progress, setProgress] = React.useState(0);\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const queryClient = useQueryClient();\n  const abortController = new AbortController();\n  const signal = abortController.signal;\n  const { post } = useFetchClient();\n\n  const mutation = useMutation<\n    UpdateFile.Response['data'],\n    ErrorMutation,\n    { asset: FileAsset; file: File }\n  >(({ asset, file }) => editAssetRequest(asset, file, signal, setProgress, post), {\n    onSuccess() {\n      queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n      queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n      queryClient.refetchQueries([pluginId, 'folders'], { active: true });\n    },\n    onError(reason) {\n      if (reason?.response?.status === 403) {\n        toggleNotification({\n          type: 'info',\n          message: formatMessage({ id: getTrad('permissions.not-allowed.update') }),\n        });\n      } else {\n        toggleNotification({ type: 'danger', message: reason?.message });\n      }\n    },\n  });\n\n  const editAsset = (asset: FileAsset, file: File) => mutation.mutateAsync({ asset, file });\n\n  const cancel = () => abortController.abort();\n\n  return { ...mutation, cancel, editAsset, progress, status: mutation.status };\n};\n"],"names":["editAssetRequest","asset","file","signal","onProgress","post","endpoint","pluginId","id","formData","FormData","append","JSON","stringify","alternativeText","caption","focalPoint","folder","name","then","res","data","useEditAsset","progress","setProgress","React","useState","formatMessage","useIntl","toggleNotification","useNotification","queryClient","useQueryClient","abortController","AbortController","useFetchClient","mutation","useMutation","onSuccess","refetchQueries","active","onError","reason","response","status","type","message","getTrad","editAsset","mutateAsync","cancel","abort"],"mappings":"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"}
+{"version":3,"file":"useEditAsset.js","sources":["../../../../admin/src/legacy/hooks/useEditAsset.ts"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  useNotification,\n  useFetchClient,\n  FetchClient,\n  isAbortError,\n  isFetchError,\n} from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { useMutation, useQueryClient } from 'react-query';\n\nimport { UpdateFile, File as FileAsset } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { getTrad } from '../utils';\n\nconst editAssetRequest = (\n  asset: FileAsset,\n  file: File,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  post: FetchClient['post']\n): Promise<UpdateFile.Response['data']> => {\n  const endpoint = `/${pluginId}?id=${asset.id}`;\n\n  const formData = new FormData();\n\n  if (file) {\n    formData.append('files', file);\n  }\n\n  formData.append(\n    'fileInfo',\n    JSON.stringify({\n      alternativeText: asset.alternativeText,\n      caption: asset.caption,\n      focalPoint: asset.focalPoint,\n      folder: asset.folder,\n      name: asset.name,\n    })\n  );\n\n  /**\n   * onProgress is not possible using native fetch\n   * need to look into an alternative to make it work\n   * perhaps using xhr like Axios does\n   */\n  return post<UpdateFile.Response['data'], UpdateFile.Request['body']>(endpoint, formData, {\n    signal,\n  }).then((res) => res.data);\n};\n\nexport const useEditAsset = () => {\n  const [progress, setProgress] = React.useState(0);\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const queryClient = useQueryClient();\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n  const { post } = useFetchClient();\n\n  const mutation = useMutation<\n    UpdateFile.Response['data'],\n    Error,\n    { asset: FileAsset; file: File }\n  >(\n    ({ asset, file }) => {\n      // One controller per request, so `cancel` reaches it after the hook re-renders.\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      return editAssetRequest(asset, file, abortController.signal, setProgress, post);\n    },\n    {\n      onSuccess() {\n        queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n        queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n        queryClient.refetchQueries([pluginId, 'folders'], { active: true });\n      },\n      onError(reason) {\n        if (isAbortError(reason) || abortControllerRef.current?.signal.aborted) return;\n\n        if (isFetchError(reason) && reason.status === 403) {\n          toggleNotification({\n            type: 'info',\n            message: formatMessage({ id: getTrad('permissions.not-allowed.update') }),\n          });\n        } else {\n          toggleNotification({ type: 'danger', message: reason.message });\n        }\n      },\n    }\n  );\n\n  const editAsset = (asset: FileAsset, file: File) => mutation.mutateAsync({ asset, file });\n\n  const cancel = () => abortControllerRef.current?.abort();\n\n  return { ...mutation, cancel, editAsset, progress, status: mutation.status };\n};\n"],"names":["editAssetRequest","asset","file","signal","onProgress","post","endpoint","pluginId","id","formData","FormData","append","JSON","stringify","alternativeText","caption","focalPoint","folder","name","then","res","data","useEditAsset","progress","setProgress","React","useState","formatMessage","useIntl","toggleNotification","useNotification","queryClient","useQueryClient","abortControllerRef","useRef","useFetchClient","mutation","useMutation","abortController","AbortController","current","onSuccess","refetchQueries","active","onError","reason","isAbortError","aborted","isFetchError","status","type","message","getTrad","editAsset","mutateAsync","cancel","abort"],"mappings":"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"}

package/dist/admin/legacy/hooks/useEditAsset.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useNotification, useFetchClient } from '@strapi/admin/strapi-admin';
+import { useNotification, useFetchClient, isAbortError, isFetchError } from '@strapi/admin/strapi-admin';
 import { useIntl } from 'react-intl';
 import { useQueryClient, useMutation } from 'react-query';
 import { pluginId } from '../../pluginId.mjs';
@@ -35,10 +35,14 @@ const useEditAsset = ()=>{
     const { formatMessage } = useIntl();
     const { toggleNotification } = useNotification();
     const queryClient = useQueryClient();
-    const abortController = new AbortController();
-    const signal = abortController.signal;
+    const abortControllerRef = React.useRef(null);
     const { post } = useFetchClient();
-    const mutation = useMutation(({ asset, file })=>editAssetRequest(asset, file, signal, setProgress, post), {
+    const mutation = useMutation(({ asset, file })=>{
+        // One controller per request, so `cancel` reaches it after the hook re-renders.
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        return editAssetRequest(asset, file, abortController.signal, setProgress, post);
+    }, {
         onSuccess () {
             queryClient.refetchQueries([
                 pluginId,
@@ -60,7 +64,8 @@ const useEditAsset = ()=>{
             });
         },
         onError (reason) {
-            if (reason?.response?.status === 403) {
+            if (isAbortError(reason) || abortControllerRef.current?.signal.aborted) return;
+            if (isFetchError(reason) && reason.status === 403) {
                 toggleNotification({
                     type: 'info',
                     message: formatMessage({
@@ -70,7 +75,7 @@ const useEditAsset = ()=>{
             } else {
                 toggleNotification({
                     type: 'danger',
-                    message: reason?.message
+                    message: reason.message
                 });
             }
         }
@@ -79,7 +84,7 @@ const useEditAsset = ()=>{
             asset,
             file
         });
-    const cancel = ()=>abortController.abort();
+    const cancel = ()=>abortControllerRef.current?.abort();
     return {
         ...mutation,
         cancel,

package/dist/admin/legacy/hooks/useEditAsset.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useEditAsset.mjs","sources":["../../../../admin/src/legacy/hooks/useEditAsset.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useNotification, useFetchClient, FetchClient } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { useMutation, useQueryClient } from 'react-query';\n\nimport { UpdateFile, File as FileAsset } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { getTrad } from '../utils';\n\nexport type ErrorMutation = {\n  message: string;\n  response: {\n    status: number;\n    data: {\n      error: Error;\n    };\n  };\n} | null;\n\nconst editAssetRequest = (\n  asset: FileAsset,\n  file: File,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  post: FetchClient['post']\n): Promise<UpdateFile.Response['data']> => {\n  const endpoint = `/${pluginId}?id=${asset.id}`;\n\n  const formData = new FormData();\n\n  if (file) {\n    formData.append('files', file);\n  }\n\n  formData.append(\n    'fileInfo',\n    JSON.stringify({\n      alternativeText: asset.alternativeText,\n      caption: asset.caption,\n      focalPoint: asset.focalPoint,\n      folder: asset.folder,\n      name: asset.name,\n    })\n  );\n\n  /**\n   * onProgress is not possible using native fetch\n   * need to look into an alternative to make it work\n   * perhaps using xhr like Axios does\n   */\n  return post<UpdateFile.Response['data'], UpdateFile.Request['body']>(endpoint, formData, {\n    signal,\n  }).then((res) => res.data);\n};\n\nexport const useEditAsset = () => {\n  const [progress, setProgress] = React.useState(0);\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const queryClient = useQueryClient();\n  const abortController = new AbortController();\n  const signal = abortController.signal;\n  const { post } = useFetchClient();\n\n  const mutation = useMutation<\n    UpdateFile.Response['data'],\n    ErrorMutation,\n    { asset: FileAsset; file: File }\n  >(({ asset, file }) => editAssetRequest(asset, file, signal, setProgress, post), {\n    onSuccess() {\n      queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n      queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n      queryClient.refetchQueries([pluginId, 'folders'], { active: true });\n    },\n    onError(reason) {\n      if (reason?.response?.status === 403) {\n        toggleNotification({\n          type: 'info',\n          message: formatMessage({ id: getTrad('permissions.not-allowed.update') }),\n        });\n      } else {\n        toggleNotification({ type: 'danger', message: reason?.message });\n      }\n    },\n  });\n\n  const editAsset = (asset: FileAsset, file: File) => mutation.mutateAsync({ asset, file });\n\n  const cancel = () => abortController.abort();\n\n  return { ...mutation, cancel, editAsset, progress, status: mutation.status };\n};\n"],"names":["editAssetRequest","asset","file","signal","onProgress","post","endpoint","pluginId","id","formData","FormData","append","JSON","stringify","alternativeText","caption","focalPoint","folder","name","then","res","data","useEditAsset","progress","setProgress","React","useState","formatMessage","useIntl","toggleNotification","useNotification","queryClient","useQueryClient","abortController","AbortController","useFetchClient","mutation","useMutation","onSuccess","refetchQueries","active","onError","reason","response","status","type","message","getTrad","editAsset","mutateAsync","cancel","abort"],"mappings":"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"}
+{"version":3,"file":"useEditAsset.mjs","sources":["../../../../admin/src/legacy/hooks/useEditAsset.ts"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  useNotification,\n  useFetchClient,\n  FetchClient,\n  isAbortError,\n  isFetchError,\n} from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { useMutation, useQueryClient } from 'react-query';\n\nimport { UpdateFile, File as FileAsset } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { getTrad } from '../utils';\n\nconst editAssetRequest = (\n  asset: FileAsset,\n  file: File,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  post: FetchClient['post']\n): Promise<UpdateFile.Response['data']> => {\n  const endpoint = `/${pluginId}?id=${asset.id}`;\n\n  const formData = new FormData();\n\n  if (file) {\n    formData.append('files', file);\n  }\n\n  formData.append(\n    'fileInfo',\n    JSON.stringify({\n      alternativeText: asset.alternativeText,\n      caption: asset.caption,\n      focalPoint: asset.focalPoint,\n      folder: asset.folder,\n      name: asset.name,\n    })\n  );\n\n  /**\n   * onProgress is not possible using native fetch\n   * need to look into an alternative to make it work\n   * perhaps using xhr like Axios does\n   */\n  return post<UpdateFile.Response['data'], UpdateFile.Request['body']>(endpoint, formData, {\n    signal,\n  }).then((res) => res.data);\n};\n\nexport const useEditAsset = () => {\n  const [progress, setProgress] = React.useState(0);\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const queryClient = useQueryClient();\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n  const { post } = useFetchClient();\n\n  const mutation = useMutation<\n    UpdateFile.Response['data'],\n    Error,\n    { asset: FileAsset; file: File }\n  >(\n    ({ asset, file }) => {\n      // One controller per request, so `cancel` reaches it after the hook re-renders.\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      return editAssetRequest(asset, file, abortController.signal, setProgress, post);\n    },\n    {\n      onSuccess() {\n        queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n        queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n        queryClient.refetchQueries([pluginId, 'folders'], { active: true });\n      },\n      onError(reason) {\n        if (isAbortError(reason) || abortControllerRef.current?.signal.aborted) return;\n\n        if (isFetchError(reason) && reason.status === 403) {\n          toggleNotification({\n            type: 'info',\n            message: formatMessage({ id: getTrad('permissions.not-allowed.update') }),\n          });\n        } else {\n          toggleNotification({ type: 'danger', message: reason.message });\n        }\n      },\n    }\n  );\n\n  const editAsset = (asset: FileAsset, file: File) => mutation.mutateAsync({ asset, file });\n\n  const cancel = () => abortControllerRef.current?.abort();\n\n  return { ...mutation, cancel, editAsset, progress, status: mutation.status };\n};\n"],"names":["editAssetRequest","asset","file","signal","onProgress","post","endpoint","pluginId","id","formData","FormData","append","JSON","stringify","alternativeText","caption","focalPoint","folder","name","then","res","data","useEditAsset","progress","setProgress","React","useState","formatMessage","useIntl","toggleNotification","useNotification","queryClient","useQueryClient","abortControllerRef","useRef","useFetchClient","mutation","useMutation","abortController","AbortController","current","onSuccess","refetchQueries","active","onError","reason","isAbortError","aborted","isFetchError","status","type","message","getTrad","editAsset","mutateAsync","cancel","abort"],"mappings":"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"}

package/dist/admin/legacy/hooks/useTracking.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var strapiAdmin = require('@strapi/admin/strapi-admin');
+var mediaLibraryVersion = require('../../utils/mediaLibraryVersion.js');
 var useAIMetadataAvailability = require('./useAIMetadataAvailability.js');
 var useSettings = require('./useSettings.js');
 
@@ -13,7 +14,8 @@ const useTracking = ()=>{
             ...properties,
             ...isAiAvailable ? {
                 isAiMediaLibraryConfigured: Boolean(data?.aiMetadata)
-            } : {}
+            } : {},
+            mediaLibraryVersion: mediaLibraryVersion.getMediaLibraryVersion()
         });
     };
     return {

package/dist/admin/legacy/hooks/useTracking.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTracking.js","sources":["../../../../admin/src/legacy/hooks/useTracking.ts"],"sourcesContent":["import { useTracking as useStrapiTracking, TrackingEvent } from '@strapi/admin/strapi-admin';\n\nimport { useAIMetadataAvailability } from './useAIMetadataAvailability';\nimport { useSettings } from './useSettings';\n\nexport const useTracking = () => {\n  const { trackUsage: trackStrapiUsage } = useStrapiTracking();\n  const { data } = useSettings();\n  const isAiAvailable = useAIMetadataAvailability();\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","useAIMetadataAvailability","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,mDAAAA,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;;;;"}
+{"version":3,"file":"useTracking.js","sources":["../../../../admin/src/legacy/hooks/useTracking.ts"],"sourcesContent":["import { useTracking as useStrapiTracking, TrackingEvent } from '@strapi/admin/strapi-admin';\n\nimport { getMediaLibraryVersion } from '../../utils/mediaLibraryVersion';\n\nimport { useAIMetadataAvailability } from './useAIMetadataAvailability';\nimport { useSettings } from './useSettings';\n\nexport const useTracking = () => {\n  const { trackUsage: trackStrapiUsage } = useStrapiTracking();\n  const { data } = useSettings();\n  const isAiAvailable = useAIMetadataAvailability();\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      mediaLibraryVersion: getMediaLibraryVersion(),\n    } as TEvent['properties']);\n  };\n\n  return { trackUsage };\n};\n"],"names":["useTracking","trackUsage","trackStrapiUsage","useStrapiTracking","data","useSettings","isAiAvailable","useAIMetadataAvailability","event","properties","isAiMediaLibraryConfigured","Boolean","aiMetadata","mediaLibraryVersion","getMediaLibraryVersion"],"mappings":";;;;;;;MAOaA,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,mDAAAA,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,EAAE;YAClFC,mBAAAA,EAAqBC,0CAAAA;AACvB,SAAA,CAAA;AACF,IAAA,CAAA;IAEA,OAAO;AAAEb,QAAAA;AAAW,KAAA;AACtB;;;;"}

package/dist/admin/legacy/hooks/useTracking.mjs

@@ -1,4 +1,5 @@
 import { useTracking as useTracking$1 } from '@strapi/admin/strapi-admin';
+import { getMediaLibraryVersion } from '../../utils/mediaLibraryVersion.mjs';
 import { useAIMetadataAvailability } from './useAIMetadataAvailability.mjs';
 import { useSettings } from './useSettings.mjs';
 
@@ -11,7 +12,8 @@ const useTracking = ()=>{
             ...properties,
             ...isAiAvailable ? {
                 isAiMediaLibraryConfigured: Boolean(data?.aiMetadata)
-            } : {}
+            } : {},
+            mediaLibraryVersion: getMediaLibraryVersion()
         });
     };
     return {

package/dist/admin/legacy/hooks/useTracking.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTracking.mjs","sources":["../../../../admin/src/legacy/hooks/useTracking.ts"],"sourcesContent":["import { useTracking as useStrapiTracking, TrackingEvent } from '@strapi/admin/strapi-admin';\n\nimport { useAIMetadataAvailability } from './useAIMetadataAvailability';\nimport { useSettings } from './useSettings';\n\nexport const useTracking = () => {\n  const { trackUsage: trackStrapiUsage } = useStrapiTracking();\n  const { data } = useSettings();\n  const isAiAvailable = useAIMetadataAvailability();\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","useAIMetadataAvailability","event","properties","isAiMediaLibraryConfigured","Boolean","aiMetadata"],"mappings":";;;;MAKaA,WAAAA,GAAc,IAAA;AACzB,IAAA,MAAM,EAAEC,UAAAA,EAAYC,gBAAgB,EAAE,GAAGC,aAAAA,EAAAA;IACzC,MAAM,EAAEC,IAAI,EAAE,GAAGC,WAAAA,EAAAA;AACjB,IAAA,MAAMC,aAAAA,GAAgBC,yBAAAA,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;;;;"}
+{"version":3,"file":"useTracking.mjs","sources":["../../../../admin/src/legacy/hooks/useTracking.ts"],"sourcesContent":["import { useTracking as useStrapiTracking, TrackingEvent } from '@strapi/admin/strapi-admin';\n\nimport { getMediaLibraryVersion } from '../../utils/mediaLibraryVersion';\n\nimport { useAIMetadataAvailability } from './useAIMetadataAvailability';\nimport { useSettings } from './useSettings';\n\nexport const useTracking = () => {\n  const { trackUsage: trackStrapiUsage } = useStrapiTracking();\n  const { data } = useSettings();\n  const isAiAvailable = useAIMetadataAvailability();\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      mediaLibraryVersion: getMediaLibraryVersion(),\n    } as TEvent['properties']);\n  };\n\n  return { trackUsage };\n};\n"],"names":["useTracking","trackUsage","trackStrapiUsage","useStrapiTracking","data","useSettings","isAiAvailable","useAIMetadataAvailability","event","properties","isAiMediaLibraryConfigured","Boolean","aiMetadata","mediaLibraryVersion","getMediaLibraryVersion"],"mappings":";;;;;MAOaA,WAAAA,GAAc,IAAA;AACzB,IAAA,MAAM,EAAEC,UAAAA,EAAYC,gBAAgB,EAAE,GAAGC,aAAAA,EAAAA;IACzC,MAAM,EAAEC,IAAI,EAAE,GAAGC,WAAAA,EAAAA;AACjB,IAAA,MAAMC,aAAAA,GAAgBC,yBAAAA,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,EAAE;YAClFC,mBAAAA,EAAqBC,sBAAAA;AACvB,SAAA,CAAA;AACF,IAAA,CAAA;IAEA,OAAO;AAAEb,QAAAA;AAAW,KAAA;AACtB;;;;"}

package/dist/admin/legacy/hooks/useUpload.js

@@ -61,11 +61,13 @@ const useUpload = ()=>{
     const dispatch = reactRedux.useDispatch();
     const [progress, setProgress] = React__namespace.useState(0);
     const queryClient = reactQuery.useQueryClient();
-    const abortController = new AbortController();
-    const signal = abortController.signal;
+    const abortControllerRef = React__namespace.useRef(null);
     const store = reactRedux.useStore();
     const mutation = reactQuery.useMutation(({ assets, folderId })=>{
-        return uploadAssets(assets, folderId, signal, setProgress, store.getState().admin_app?.token);
+        // One controller per request, so `cancel` reaches it after the hook re-renders.
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        return uploadAssets(assets, folderId, abortController.signal, setProgress, store.getState().admin_app?.token);
     }, {
         mutationKey: [
             pluginId.pluginId,
@@ -94,7 +96,7 @@ const useUpload = ()=>{
             assets,
             folderId
         });
-    const cancel = ()=>abortController.abort();
+    const cancel = ()=>abortControllerRef.current?.abort();
     return {
         upload,
         isLoading: mutation.isLoading,

package/dist/admin/legacy/hooks/useUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUpload.js","sources":["../../../../admin/src/legacy/hooks/useUpload.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { adminApi } from '@strapi/admin/strapi-admin';\nimport { useMutation, useQueryClient } from 'react-query';\nimport { useDispatch, useStore } from 'react-redux';\n\nimport { File, RawFile, CreateFile } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { uploadFileViaXHR } from '../../services/uploadFileViaXHR';\n\nconst endpoint = `/${pluginId}`;\n\ninterface Asset extends Omit<File, 'id' | 'hash'> {\n  rawFile?: RawFile;\n  id?: File['id'];\n  hash?: File['hash'];\n}\n\ninterface StoreState {\n  admin_app: {\n    token?: string | null;\n  };\n}\n\nconst uploadAssets = (\n  assets: Asset | Asset[],\n  folderId: number | null,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  token: string | null | undefined\n): Promise<CreateFile.Response['data']> => {\n  const assetsArray = Array.isArray(assets) ? assets : [assets];\n  const formData = new FormData();\n\n  // Add all files to the form data\n  assetsArray.forEach((asset) => {\n    if (asset.rawFile) {\n      formData.append('files', asset.rawFile);\n    }\n  });\n\n  // Add each fileInfo as a separate stringified field\n  assetsArray.forEach((asset) => {\n    formData.append(\n      'fileInfo',\n      JSON.stringify({\n        name: asset.name,\n        caption: asset.caption,\n        alternativeText: asset.alternativeText,\n        folder: folderId,\n      })\n    );\n  });\n\n  /**\n   * Native fetch cannot report upload progress, so upload via the shared XHR\n   * service and surface its byte-level progress as a 0-100 percentage.\n   */\n  return uploadFileViaXHR<CreateFile.Response['data']>(\n    `${window.strapi.backendURL}${endpoint}`,\n    token,\n    formData,\n    signal,\n    (loaded, total) => {\n      if (total > 0) {\n        onProgress(Math.round((loaded / total) * 100));\n      }\n    }\n  );\n};\n\nexport const useUpload = () => {\n  const dispatch = useDispatch();\n  const [progress, setProgress] = React.useState(0);\n  const queryClient = useQueryClient();\n  const abortController = new AbortController();\n  const signal = abortController.signal;\n  const store = useStore<StoreState>();\n\n  const mutation = useMutation<\n    CreateFile.Response['data'],\n    CreateFile.Response['error'],\n    { assets: Asset | Asset[]; folderId: number | null }\n  >(\n    ({ assets, folderId }) => {\n      return uploadAssets(assets, folderId, signal, setProgress, store.getState().admin_app?.token);\n    },\n    {\n      mutationKey: [pluginId, 'upload'],\n      onSuccess() {\n        queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n        queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n        dispatch(adminApi.util.invalidateTags(['HomepageKeyStatistics', 'AiUsage']));\n      },\n    }\n  );\n\n  const upload = (assets: Asset | Asset[], folderId: number | null) =>\n    mutation.mutateAsync({ assets, folderId });\n\n  const cancel = () => abortController.abort();\n\n  return {\n    upload,\n    isLoading: mutation.isLoading,\n    cancel,\n    error: mutation.error,\n    progress,\n    status: mutation.status,\n  };\n};\n"],"names":["endpoint","pluginId","uploadAssets","assets","folderId","signal","onProgress","token","assetsArray","Array","isArray","formData","FormData","forEach","asset","rawFile","append","JSON","stringify","name","caption","alternativeText","folder","uploadFileViaXHR","window","strapi","backendURL","loaded","total","Math","round","useUpload","dispatch","useDispatch","progress","setProgress","React","useState","queryClient","useQueryClient","abortController","AbortController","store","useStore","mutation","useMutation","getState","admin_app","mutationKey","onSuccess","refetchQueries","active","adminApi","util","invalidateTags","upload","mutateAsync","cancel","abort","isLoading","error","status"],"mappings":"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"}
+{"version":3,"file":"useUpload.js","sources":["../../../../admin/src/legacy/hooks/useUpload.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { adminApi } from '@strapi/admin/strapi-admin';\nimport { useMutation, useQueryClient } from 'react-query';\nimport { useDispatch, useStore } from 'react-redux';\n\nimport { File, RawFile, CreateFile } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { uploadFileViaXHR } from '../../services/uploadFileViaXHR';\n\nconst endpoint = `/${pluginId}`;\n\ninterface Asset extends Omit<File, 'id' | 'hash'> {\n  rawFile?: RawFile;\n  id?: File['id'];\n  hash?: File['hash'];\n}\n\ninterface StoreState {\n  admin_app: {\n    token?: string | null;\n  };\n}\n\nconst uploadAssets = (\n  assets: Asset | Asset[],\n  folderId: number | null,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  token: string | null | undefined\n): Promise<CreateFile.Response['data']> => {\n  const assetsArray = Array.isArray(assets) ? assets : [assets];\n  const formData = new FormData();\n\n  // Add all files to the form data\n  assetsArray.forEach((asset) => {\n    if (asset.rawFile) {\n      formData.append('files', asset.rawFile);\n    }\n  });\n\n  // Add each fileInfo as a separate stringified field\n  assetsArray.forEach((asset) => {\n    formData.append(\n      'fileInfo',\n      JSON.stringify({\n        name: asset.name,\n        caption: asset.caption,\n        alternativeText: asset.alternativeText,\n        folder: folderId,\n      })\n    );\n  });\n\n  /**\n   * Native fetch cannot report upload progress, so upload via the shared XHR\n   * service and surface its byte-level progress as a 0-100 percentage.\n   */\n  return uploadFileViaXHR<CreateFile.Response['data']>(\n    `${window.strapi.backendURL}${endpoint}`,\n    token,\n    formData,\n    signal,\n    (loaded, total) => {\n      if (total > 0) {\n        onProgress(Math.round((loaded / total) * 100));\n      }\n    }\n  );\n};\n\nexport const useUpload = () => {\n  const dispatch = useDispatch();\n  const [progress, setProgress] = React.useState(0);\n  const queryClient = useQueryClient();\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n  const store = useStore<StoreState>();\n\n  const mutation = useMutation<\n    CreateFile.Response['data'],\n    CreateFile.Response['error'],\n    { assets: Asset | Asset[]; folderId: number | null }\n  >(\n    ({ assets, folderId }) => {\n      // One controller per request, so `cancel` reaches it after the hook re-renders.\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      return uploadAssets(\n        assets,\n        folderId,\n        abortController.signal,\n        setProgress,\n        store.getState().admin_app?.token\n      );\n    },\n    {\n      mutationKey: [pluginId, 'upload'],\n      onSuccess() {\n        queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n        queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n        dispatch(adminApi.util.invalidateTags(['HomepageKeyStatistics', 'AiUsage']));\n      },\n    }\n  );\n\n  const upload = (assets: Asset | Asset[], folderId: number | null) =>\n    mutation.mutateAsync({ assets, folderId });\n\n  const cancel = () => abortControllerRef.current?.abort();\n\n  return {\n    upload,\n    isLoading: mutation.isLoading,\n    cancel,\n    error: mutation.error,\n    progress,\n    status: mutation.status,\n  };\n};\n"],"names":["endpoint","pluginId","uploadAssets","assets","folderId","signal","onProgress","token","assetsArray","Array","isArray","formData","FormData","forEach","asset","rawFile","append","JSON","stringify","name","caption","alternativeText","folder","uploadFileViaXHR","window","strapi","backendURL","loaded","total","Math","round","useUpload","dispatch","useDispatch","progress","setProgress","React","useState","queryClient","useQueryClient","abortControllerRef","useRef","store","useStore","mutation","useMutation","abortController","AbortController","current","getState","admin_app","mutationKey","onSuccess","refetchQueries","active","adminApi","util","invalidateTags","upload","mutateAsync","cancel","abort","isLoading","error","status"],"mappings":"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"}

package/dist/admin/legacy/hooks/useUpload.mjs

@@ -39,11 +39,13 @@ const useUpload = ()=>{
     const dispatch = useDispatch();
     const [progress, setProgress] = React.useState(0);
     const queryClient = useQueryClient();
-    const abortController = new AbortController();
-    const signal = abortController.signal;
+    const abortControllerRef = React.useRef(null);
     const store = useStore();
     const mutation = useMutation(({ assets, folderId })=>{
-        return uploadAssets(assets, folderId, signal, setProgress, store.getState().admin_app?.token);
+        // One controller per request, so `cancel` reaches it after the hook re-renders.
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        return uploadAssets(assets, folderId, abortController.signal, setProgress, store.getState().admin_app?.token);
     }, {
         mutationKey: [
             pluginId,
@@ -72,7 +74,7 @@ const useUpload = ()=>{
             assets,
             folderId
         });
-    const cancel = ()=>abortController.abort();
+    const cancel = ()=>abortControllerRef.current?.abort();
     return {
         upload,
         isLoading: mutation.isLoading,

package/dist/admin/legacy/hooks/useUpload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useUpload.mjs","sources":["../../../../admin/src/legacy/hooks/useUpload.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { adminApi } from '@strapi/admin/strapi-admin';\nimport { useMutation, useQueryClient } from 'react-query';\nimport { useDispatch, useStore } from 'react-redux';\n\nimport { File, RawFile, CreateFile } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { uploadFileViaXHR } from '../../services/uploadFileViaXHR';\n\nconst endpoint = `/${pluginId}`;\n\ninterface Asset extends Omit<File, 'id' | 'hash'> {\n  rawFile?: RawFile;\n  id?: File['id'];\n  hash?: File['hash'];\n}\n\ninterface StoreState {\n  admin_app: {\n    token?: string | null;\n  };\n}\n\nconst uploadAssets = (\n  assets: Asset | Asset[],\n  folderId: number | null,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  token: string | null | undefined\n): Promise<CreateFile.Response['data']> => {\n  const assetsArray = Array.isArray(assets) ? assets : [assets];\n  const formData = new FormData();\n\n  // Add all files to the form data\n  assetsArray.forEach((asset) => {\n    if (asset.rawFile) {\n      formData.append('files', asset.rawFile);\n    }\n  });\n\n  // Add each fileInfo as a separate stringified field\n  assetsArray.forEach((asset) => {\n    formData.append(\n      'fileInfo',\n      JSON.stringify({\n        name: asset.name,\n        caption: asset.caption,\n        alternativeText: asset.alternativeText,\n        folder: folderId,\n      })\n    );\n  });\n\n  /**\n   * Native fetch cannot report upload progress, so upload via the shared XHR\n   * service and surface its byte-level progress as a 0-100 percentage.\n   */\n  return uploadFileViaXHR<CreateFile.Response['data']>(\n    `${window.strapi.backendURL}${endpoint}`,\n    token,\n    formData,\n    signal,\n    (loaded, total) => {\n      if (total > 0) {\n        onProgress(Math.round((loaded / total) * 100));\n      }\n    }\n  );\n};\n\nexport const useUpload = () => {\n  const dispatch = useDispatch();\n  const [progress, setProgress] = React.useState(0);\n  const queryClient = useQueryClient();\n  const abortController = new AbortController();\n  const signal = abortController.signal;\n  const store = useStore<StoreState>();\n\n  const mutation = useMutation<\n    CreateFile.Response['data'],\n    CreateFile.Response['error'],\n    { assets: Asset | Asset[]; folderId: number | null }\n  >(\n    ({ assets, folderId }) => {\n      return uploadAssets(assets, folderId, signal, setProgress, store.getState().admin_app?.token);\n    },\n    {\n      mutationKey: [pluginId, 'upload'],\n      onSuccess() {\n        queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n        queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n        dispatch(adminApi.util.invalidateTags(['HomepageKeyStatistics', 'AiUsage']));\n      },\n    }\n  );\n\n  const upload = (assets: Asset | Asset[], folderId: number | null) =>\n    mutation.mutateAsync({ assets, folderId });\n\n  const cancel = () => abortController.abort();\n\n  return {\n    upload,\n    isLoading: mutation.isLoading,\n    cancel,\n    error: mutation.error,\n    progress,\n    status: mutation.status,\n  };\n};\n"],"names":["endpoint","pluginId","uploadAssets","assets","folderId","signal","onProgress","token","assetsArray","Array","isArray","formData","FormData","forEach","asset","rawFile","append","JSON","stringify","name","caption","alternativeText","folder","uploadFileViaXHR","window","strapi","backendURL","loaded","total","Math","round","useUpload","dispatch","useDispatch","progress","setProgress","React","useState","queryClient","useQueryClient","abortController","AbortController","store","useStore","mutation","useMutation","getState","admin_app","mutationKey","onSuccess","refetchQueries","active","adminApi","util","invalidateTags","upload","mutateAsync","cancel","abort","isLoading","error","status"],"mappings":"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"}
+{"version":3,"file":"useUpload.mjs","sources":["../../../../admin/src/legacy/hooks/useUpload.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { adminApi } from '@strapi/admin/strapi-admin';\nimport { useMutation, useQueryClient } from 'react-query';\nimport { useDispatch, useStore } from 'react-redux';\n\nimport { File, RawFile, CreateFile } from '../../../../shared/contracts/files';\nimport { pluginId } from '../../pluginId';\nimport { uploadFileViaXHR } from '../../services/uploadFileViaXHR';\n\nconst endpoint = `/${pluginId}`;\n\ninterface Asset extends Omit<File, 'id' | 'hash'> {\n  rawFile?: RawFile;\n  id?: File['id'];\n  hash?: File['hash'];\n}\n\ninterface StoreState {\n  admin_app: {\n    token?: string | null;\n  };\n}\n\nconst uploadAssets = (\n  assets: Asset | Asset[],\n  folderId: number | null,\n  signal: AbortSignal,\n  onProgress: (progress: number) => void,\n  token: string | null | undefined\n): Promise<CreateFile.Response['data']> => {\n  const assetsArray = Array.isArray(assets) ? assets : [assets];\n  const formData = new FormData();\n\n  // Add all files to the form data\n  assetsArray.forEach((asset) => {\n    if (asset.rawFile) {\n      formData.append('files', asset.rawFile);\n    }\n  });\n\n  // Add each fileInfo as a separate stringified field\n  assetsArray.forEach((asset) => {\n    formData.append(\n      'fileInfo',\n      JSON.stringify({\n        name: asset.name,\n        caption: asset.caption,\n        alternativeText: asset.alternativeText,\n        folder: folderId,\n      })\n    );\n  });\n\n  /**\n   * Native fetch cannot report upload progress, so upload via the shared XHR\n   * service and surface its byte-level progress as a 0-100 percentage.\n   */\n  return uploadFileViaXHR<CreateFile.Response['data']>(\n    `${window.strapi.backendURL}${endpoint}`,\n    token,\n    formData,\n    signal,\n    (loaded, total) => {\n      if (total > 0) {\n        onProgress(Math.round((loaded / total) * 100));\n      }\n    }\n  );\n};\n\nexport const useUpload = () => {\n  const dispatch = useDispatch();\n  const [progress, setProgress] = React.useState(0);\n  const queryClient = useQueryClient();\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n  const store = useStore<StoreState>();\n\n  const mutation = useMutation<\n    CreateFile.Response['data'],\n    CreateFile.Response['error'],\n    { assets: Asset | Asset[]; folderId: number | null }\n  >(\n    ({ assets, folderId }) => {\n      // One controller per request, so `cancel` reaches it after the hook re-renders.\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      return uploadAssets(\n        assets,\n        folderId,\n        abortController.signal,\n        setProgress,\n        store.getState().admin_app?.token\n      );\n    },\n    {\n      mutationKey: [pluginId, 'upload'],\n      onSuccess() {\n        queryClient.refetchQueries([pluginId, 'assets'], { active: true });\n        queryClient.refetchQueries([pluginId, 'asset-count'], { active: true });\n        dispatch(adminApi.util.invalidateTags(['HomepageKeyStatistics', 'AiUsage']));\n      },\n    }\n  );\n\n  const upload = (assets: Asset | Asset[], folderId: number | null) =>\n    mutation.mutateAsync({ assets, folderId });\n\n  const cancel = () => abortControllerRef.current?.abort();\n\n  return {\n    upload,\n    isLoading: mutation.isLoading,\n    cancel,\n    error: mutation.error,\n    progress,\n    status: mutation.status,\n  };\n};\n"],"names":["endpoint","pluginId","uploadAssets","assets","folderId","signal","onProgress","token","assetsArray","Array","isArray","formData","FormData","forEach","asset","rawFile","append","JSON","stringify","name","caption","alternativeText","folder","uploadFileViaXHR","window","strapi","backendURL","loaded","total","Math","round","useUpload","dispatch","useDispatch","progress","setProgress","React","useState","queryClient","useQueryClient","abortControllerRef","useRef","store","useStore","mutation","useMutation","abortController","AbortController","current","getState","admin_app","mutationKey","onSuccess","refetchQueries","active","adminApi","util","invalidateTags","upload","mutateAsync","cancel","abort","isLoading","error","status"],"mappings":"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"}

package/dist/admin/legacy/pages/App/ConfigureTheView/ConfigureTheView.js

@@ -10,6 +10,7 @@ var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var pluginId = require('../../../../pluginId.js');
 var useConfig = require('../../../hooks/useConfig.js');
+var useTracking = require('../../../hooks/useTracking.js');
 require('byte-size');
 require('date-fns');
 var getTrad = require('../../../utils/getTrad.js');
@@ -45,7 +46,7 @@ var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 
 // TODO: find a better naming convention for the file that was an index file before
 const ConfigureTheView = ({ config })=>{
-    const { trackUsage } = strapiAdmin.useTracking();
+    const { trackUsage } = useTracking.useTracking();
     const { formatMessage } = reactIntl.useIntl();
     const { toggleNotification } = strapiAdmin.useNotification();
     const { mutateConfig } = useConfig.useConfig();

package/dist/admin/legacy/pages/App/ConfigureTheView/ConfigureTheView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigureTheView.js","sources":["../../../../../../admin/src/legacy/pages/App/ConfigureTheView/ConfigureTheView.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport {\n  ConfirmDialog,\n  useTracking,\n  useNotification,\n  Page,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Button, Dialog, Link } from '@strapi/design-system';\nimport { ArrowLeft, Check } from '@strapi/icons';\nimport isEqual from 'lodash/isEqual';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { pluginId } from '../../../../pluginId';\nimport { useConfig } from '../../../hooks/useConfig';\nimport { getTrad } from '../../../utils';\n\nimport { Settings } from './components/Settings';\nimport { onChange, setLoaded } from './state/actions';\nimport { init, initialState } from './state/init';\nimport { reducer } from './state/reducer';\n\nimport type { InitialState } from './state/init';\nimport type { Action } from './state/reducer';\nimport type { Configuration } from '../../../../../../shared/contracts/configuration';\n\ninterface ConfigureTheViewProps {\n  config: Configuration;\n}\n\nexport const ConfigureTheView = ({ config }: ConfigureTheViewProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { mutateConfig } = useConfig();\n  const { isLoading: isSubmittingForm } = mutateConfig;\n\n  const [showWarningSubmit, setWarningSubmit] = React.useState(false);\n  const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);\n\n  const [reducerState, dispatch] = React.useReducer(\n    reducer,\n    initialState,\n    (): InitialState => init(config)\n  );\n  const typedDispatch: React.Dispatch<Action> = dispatch;\n  const { initialData, modifiedData } = reducerState;\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    toggleWarningSubmit();\n  };\n\n  const handleConfirm = async () => {\n    trackUsage('willEditMediaLibraryConfig');\n    await mutateConfig.mutateAsync(modifiedData as Configuration);\n    setWarningSubmit(false);\n    typedDispatch(setLoaded());\n    toggleNotification({\n      type: 'success',\n      message: formatMessage({\n        id: 'notification.form.success.fields',\n        defaultMessage: 'Changes saved',\n      }),\n    });\n  };\n\n  const handleChange = ({\n    target: { name, value },\n  }: {\n    target: { name: keyof Configuration; value: string | number };\n  }) => {\n    typedDispatch(onChange({ name, value }));\n  };\n\n  return (\n    <Layouts.Root>\n      <Page.Main aria-busy={isSubmittingForm}>\n        <form onSubmit={handleSubmit}>\n          <Layouts.Header\n            navigationAction={\n              <Link\n                tag={NavLink}\n                startIcon={<ArrowLeft />}\n                to={`/plugins/${pluginId}`}\n                id=\"go-back\"\n              >\n                {formatMessage({ id: getTrad('config.back'), defaultMessage: 'Back' })}\n              </Link>\n            }\n            primaryAction={\n              <Button\n                size=\"S\"\n                startIcon={<Check />}\n                disabled={isEqual(modifiedData, initialData)}\n                type=\"submit\"\n                fullWidth\n              >\n                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n              </Button>\n            }\n            subtitle={formatMessage({\n              id: getTrad('config.subtitle'),\n              defaultMessage: 'Define the view settings of the media library.',\n            })}\n            title={formatMessage({\n              id: getTrad('config.title'),\n              defaultMessage: 'Configure the view - Media Library',\n            })}\n          />\n          <Layouts.Content>\n            <Settings\n              data-testid=\"settings\"\n              pageSize={modifiedData.pageSize || ''}\n              sort={modifiedData.sort || ''}\n              onChange={handleChange}\n            />\n          </Layouts.Content>\n          <Dialog.Root open={showWarningSubmit} onOpenChange={toggleWarningSubmit}>\n            <ConfirmDialog onConfirm={handleConfirm} variant=\"default\">\n              {formatMessage({\n                id: getTrad('config.popUpWarning.warning.updateAllSettings'),\n                defaultMessage: 'This will modify all your settings',\n              })}\n            </ConfirmDialog>\n          </Dialog.Root>\n        </form>\n      </Page.Main>\n    </Layouts.Root>\n  );\n};\n"],"names":["ConfigureTheView","config","trackUsage","useTracking","formatMessage","useIntl","toggleNotification","useNotification","mutateConfig","useConfig","isLoading","isSubmittingForm","showWarningSubmit","setWarningSubmit","React","useState","toggleWarningSubmit","prevState","reducerState","dispatch","useReducer","reducer","initialState","init","typedDispatch","initialData","modifiedData","handleSubmit","e","preventDefault","handleConfirm","mutateAsync","setLoaded","type","message","id","defaultMessage","handleChange","target","name","value","onChange","_jsx","Layouts","Root","Page","Main","aria-busy","_jsxs","form","onSubmit","Header","navigationAction","Link","tag","NavLink","startIcon","ArrowLeft","to","pluginId","getTrad","primaryAction","Button","size","Check","disabled","isEqual","fullWidth","subtitle","title","Content","Settings","data-testid","pageSize","sort","Dialog","open","onOpenChange","ConfirmDialog","onConfirm","variant"],"mappings":"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"}
+{"version":3,"file":"ConfigureTheView.js","sources":["../../../../../../admin/src/legacy/pages/App/ConfigureTheView/ConfigureTheView.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { ConfirmDialog, useNotification, Page, Layouts } from '@strapi/admin/strapi-admin';\nimport { Button, Dialog, Link } from '@strapi/design-system';\nimport { ArrowLeft, Check } from '@strapi/icons';\nimport isEqual from 'lodash/isEqual';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { pluginId } from '../../../../pluginId';\nimport { useConfig } from '../../../hooks/useConfig';\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad } from '../../../utils';\n\nimport { Settings } from './components/Settings';\nimport { onChange, setLoaded } from './state/actions';\nimport { init, initialState } from './state/init';\nimport { reducer } from './state/reducer';\n\nimport type { InitialState } from './state/init';\nimport type { Action } from './state/reducer';\nimport type { Configuration } from '../../../../../../shared/contracts/configuration';\n\ninterface ConfigureTheViewProps {\n  config: Configuration;\n}\n\nexport const ConfigureTheView = ({ config }: ConfigureTheViewProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { mutateConfig } = useConfig();\n  const { isLoading: isSubmittingForm } = mutateConfig;\n\n  const [showWarningSubmit, setWarningSubmit] = React.useState(false);\n  const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);\n\n  const [reducerState, dispatch] = React.useReducer(\n    reducer,\n    initialState,\n    (): InitialState => init(config)\n  );\n  const typedDispatch: React.Dispatch<Action> = dispatch;\n  const { initialData, modifiedData } = reducerState;\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    toggleWarningSubmit();\n  };\n\n  const handleConfirm = async () => {\n    trackUsage('willEditMediaLibraryConfig');\n    await mutateConfig.mutateAsync(modifiedData as Configuration);\n    setWarningSubmit(false);\n    typedDispatch(setLoaded());\n    toggleNotification({\n      type: 'success',\n      message: formatMessage({\n        id: 'notification.form.success.fields',\n        defaultMessage: 'Changes saved',\n      }),\n    });\n  };\n\n  const handleChange = ({\n    target: { name, value },\n  }: {\n    target: { name: keyof Configuration; value: string | number };\n  }) => {\n    typedDispatch(onChange({ name, value }));\n  };\n\n  return (\n    <Layouts.Root>\n      <Page.Main aria-busy={isSubmittingForm}>\n        <form onSubmit={handleSubmit}>\n          <Layouts.Header\n            navigationAction={\n              <Link\n                tag={NavLink}\n                startIcon={<ArrowLeft />}\n                to={`/plugins/${pluginId}`}\n                id=\"go-back\"\n              >\n                {formatMessage({ id: getTrad('config.back'), defaultMessage: 'Back' })}\n              </Link>\n            }\n            primaryAction={\n              <Button\n                size=\"S\"\n                startIcon={<Check />}\n                disabled={isEqual(modifiedData, initialData)}\n                type=\"submit\"\n                fullWidth\n              >\n                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n              </Button>\n            }\n            subtitle={formatMessage({\n              id: getTrad('config.subtitle'),\n              defaultMessage: 'Define the view settings of the media library.',\n            })}\n            title={formatMessage({\n              id: getTrad('config.title'),\n              defaultMessage: 'Configure the view - Media Library',\n            })}\n          />\n          <Layouts.Content>\n            <Settings\n              data-testid=\"settings\"\n              pageSize={modifiedData.pageSize || ''}\n              sort={modifiedData.sort || ''}\n              onChange={handleChange}\n            />\n          </Layouts.Content>\n          <Dialog.Root open={showWarningSubmit} onOpenChange={toggleWarningSubmit}>\n            <ConfirmDialog onConfirm={handleConfirm} variant=\"default\">\n              {formatMessage({\n                id: getTrad('config.popUpWarning.warning.updateAllSettings'),\n                defaultMessage: 'This will modify all your settings',\n              })}\n            </ConfirmDialog>\n          </Dialog.Root>\n        </form>\n      </Page.Main>\n    </Layouts.Root>\n  );\n};\n"],"names":["ConfigureTheView","config","trackUsage","useTracking","formatMessage","useIntl","toggleNotification","useNotification","mutateConfig","useConfig","isLoading","isSubmittingForm","showWarningSubmit","setWarningSubmit","React","useState","toggleWarningSubmit","prevState","reducerState","dispatch","useReducer","reducer","initialState","init","typedDispatch","initialData","modifiedData","handleSubmit","e","preventDefault","handleConfirm","mutateAsync","setLoaded","type","message","id","defaultMessage","handleChange","target","name","value","onChange","_jsx","Layouts","Root","Page","Main","aria-busy","_jsxs","form","onSubmit","Header","navigationAction","Link","tag","NavLink","startIcon","ArrowLeft","to","pluginId","getTrad","primaryAction","Button","size","Check","disabled","isEqual","fullWidth","subtitle","title","Content","Settings","data-testid","pageSize","sort","Dialog","open","onOpenChange","ConfirmDialog","onConfirm","variant"],"mappings":"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"}

package/dist/admin/legacy/pages/App/ConfigureTheView/ConfigureTheView.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useTracking, useNotification, Layouts, Page, ConfirmDialog } from '@strapi/admin/strapi-admin';
+import { useNotification, Layouts, Page, ConfirmDialog } from '@strapi/admin/strapi-admin';
 import { Button, Link, Dialog } from '@strapi/design-system';
 import { Check, ArrowLeft } from '@strapi/icons';
 import isEqual from 'lodash/isEqual';
@@ -8,6 +8,7 @@ import { useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import { pluginId } from '../../../../pluginId.mjs';
 import { useConfig } from '../../../hooks/useConfig.mjs';
+import { useTracking } from '../../../hooks/useTracking.mjs';
 import 'byte-size';
 import 'date-fns';
 import { getTrad } from '../../../utils/getTrad.mjs';