@strapi/upload 5.34.0 → 5.35.0

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

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

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewComponents.js

@@ -65,10 +65,57 @@ const UploadProgressWrapper = styledComponents.styled.div`
   height: 100%;
   width: 100%;
 `;
+const FocalPointActionRow = styledComponents.styled(designSystem.Flex)`
+  z-index: 1;
+  height: 5.2rem;
+  position: absolute;
+  background-color: rgba(33, 33, 52, 0.4);
+  width: 100%;
+`;
+const FocalPointImageWrapper = styledComponents.styled.div`
+  display: inline-block;
+  position: relative;
+`;
+const FocalPointAim = styledComponents.styled.div`
+  position: absolute;
+  pointer-events: none;
+  left: ${({ $focalPoint })=>$focalPoint.x}%;
+  top: ${({ $focalPoint })=>$focalPoint.y}%;
+
+  &:before {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border: 2px solid ${({ theme })=>theme.colors.primary700};
+    border-radius: 50%;
+    background-color: ${({ theme })=>theme.colors.primary500};
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+const FocalPointHalo = styledComponents.styled.div`
+  &:before {
+    content: '';
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border: 1px solid ${({ theme })=>theme.colors.neutral500};
+    border-radius: 50%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
 
 exports.ActionRow = ActionRow;
 exports.BadgeOverride = BadgeOverride;
 exports.CroppingActionRow = CroppingActionRow;
+exports.FocalPointActionRow = FocalPointActionRow;
+exports.FocalPointAim = FocalPointAim;
+exports.FocalPointHalo = FocalPointHalo;
+exports.FocalPointImageWrapper = FocalPointImageWrapper;
 exports.RelativeBox = RelativeBox;
 exports.UploadProgressWrapper = UploadProgressWrapper;
 exports.Wrapper = Wrapper;

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewComponents.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n  position: relative;\n`;\n\nexport const Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n\n  svg {\n    height: 26px;\n  }\n\n  img,\n  mux-player {\n    margin: 0;\n    padding: 0;\n    max-height: 26.4rem;\n    max-width: 100%;\n  }\n\n  mux-player {\n    --play-button: inline-flex;\n    --mute-button: inline-flex;\n    --pip-button: inline-flex;\n    --fullscreen-button: inline-flex;\n    --playback-rate-button: inline-flex;\n    --volume-range: inline-flex;\n    --time-range: inline-flex;\n    --time-display: inline-flex;\n    --duration-display: inline-flex;\n  }\n`;\n\nexport const ActionRow = styled(Flex)`\n  height: 5.2rem;\n  background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n  span {\n    color: inherit;\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n  position: absolute;\n  z-index: 2;\n  height: 100%;\n  width: 100%;\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper"],"mappings":";;;;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,uBAAOC,CAAAA,gBAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,uBAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,uBAAOQ,CAAAA,iBAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,uBAAOQ,CAAAA,iBAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,uBAAOa,CAAAA,kBAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,uBAAOG,CAAAA,GAAG;;;;;AAK/C;;;;;;;;;"}
+{"version":3,"file":"PreviewComponents.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n  position: relative;\n`;\n\nexport const Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n\n  svg {\n    height: 26px;\n  }\n\n  img,\n  mux-player {\n    margin: 0;\n    padding: 0;\n    max-height: 26.4rem;\n    max-width: 100%;\n  }\n\n  mux-player {\n    --play-button: inline-flex;\n    --mute-button: inline-flex;\n    --pip-button: inline-flex;\n    --fullscreen-button: inline-flex;\n    --playback-rate-button: inline-flex;\n    --volume-range: inline-flex;\n    --time-range: inline-flex;\n    --time-display: inline-flex;\n    --duration-display: inline-flex;\n  }\n`;\n\nexport const ActionRow = styled(Flex)`\n  height: 5.2rem;\n  background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n  span {\n    color: inherit;\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n  position: absolute;\n  z-index: 2;\n  height: 100%;\n  width: 100%;\n`;\n\nexport const FocalPointActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\nexport const FocalPointImageWrapper = styled.div`\n  display: inline-block;\n  position: relative;\n`;\n\ninterface FocalPointAimProps {\n  $focalPoint: { x: number; y: number };\n}\n\nexport const FocalPointAim = styled.div<FocalPointAimProps>`\n  position: absolute;\n  pointer-events: none;\n  left: ${({ $focalPoint }) => $focalPoint.x}%;\n  top: ${({ $focalPoint }) => $focalPoint.y}%;\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    border: 2px solid ${({ theme }) => theme.colors.primary700};\n    border-radius: 50%;\n    background-color: ${({ theme }) => theme.colors.primary500};\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n`;\n\nexport const FocalPointHalo = styled.div`\n  &:before {\n    content: '';\n    position: absolute;\n    width: 50px;\n    height: 50px;\n    border: 1px solid ${({ theme }) => theme.colors.neutral500};\n    border-radius: 50%;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper","FocalPointActionRow","FocalPointImageWrapper","FocalPointAim","$focalPoint","x","y","primary700","primary500","FocalPointHalo","neutral500"],"mappings":";;;;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,uBAAOC,CAAAA,gBAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,uBAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,uBAAOQ,CAAAA,iBAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,uBAAOQ,CAAAA,iBAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,uBAAOa,CAAAA,kBAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,uBAAOG,CAAAA,GAAG;;;;;AAK/C;AAEac,MAAAA,mBAAAA,GAAsBjB,uBAAOQ,CAAAA,iBAAAA,CAAK;;;;;;AAM/C;AAEaU,MAAAA,sBAAAA,GAAyBlB,uBAAOG,CAAAA,GAAG;;;AAGhD;AAMagB,MAAAA,aAAAA,GAAgBnB,uBAAOG,CAAAA,GAAG;;;AAG/B,QAAA,EAAE,CAAC,EAAEiB,WAAW,EAAE,GAAKA,WAAAA,CAAYC,CAAC,CAAC;AACtC,OAAA,EAAE,CAAC,EAAED,WAAW,EAAE,GAAKA,WAAAA,CAAYE,CAAC,CAAC;;;;;;;sBAOtB,EAAE,CAAC,EAAElB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACkB,UAAU,CAAC;;sBAEzC,EAAE,CAAC,EAAEnB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACmB,UAAU,CAAC;;;;;AAK/D;AAEaC,MAAAA,cAAAA,GAAiBzB,uBAAOG,CAAAA,GAAG;;;;;;sBAMlB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACqB,UAAU,CAAC;;;;;;AAM/D;;;;;;;;;;;;;"}

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewComponents.mjs

@@ -63,6 +63,49 @@ const UploadProgressWrapper = styled.div`
   height: 100%;
   width: 100%;
 `;
+const FocalPointActionRow = styled(Flex)`
+  z-index: 1;
+  height: 5.2rem;
+  position: absolute;
+  background-color: rgba(33, 33, 52, 0.4);
+  width: 100%;
+`;
+const FocalPointImageWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+const FocalPointAim = styled.div`
+  position: absolute;
+  pointer-events: none;
+  left: ${({ $focalPoint })=>$focalPoint.x}%;
+  top: ${({ $focalPoint })=>$focalPoint.y}%;
+
+  &:before {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border: 2px solid ${({ theme })=>theme.colors.primary700};
+    border-radius: 50%;
+    background-color: ${({ theme })=>theme.colors.primary500};
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+const FocalPointHalo = styled.div`
+  &:before {
+    content: '';
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border: 1px solid ${({ theme })=>theme.colors.neutral500};
+    border-radius: 50%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
 
-export { ActionRow, BadgeOverride, CroppingActionRow, RelativeBox, UploadProgressWrapper, Wrapper };
+export { ActionRow, BadgeOverride, CroppingActionRow, FocalPointActionRow, FocalPointAim, FocalPointHalo, FocalPointImageWrapper, RelativeBox, UploadProgressWrapper, Wrapper };
 //# sourceMappingURL=PreviewComponents.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewComponents.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n  position: relative;\n`;\n\nexport const Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n\n  svg {\n    height: 26px;\n  }\n\n  img,\n  mux-player {\n    margin: 0;\n    padding: 0;\n    max-height: 26.4rem;\n    max-width: 100%;\n  }\n\n  mux-player {\n    --play-button: inline-flex;\n    --mute-button: inline-flex;\n    --pip-button: inline-flex;\n    --fullscreen-button: inline-flex;\n    --playback-rate-button: inline-flex;\n    --volume-range: inline-flex;\n    --time-range: inline-flex;\n    --time-display: inline-flex;\n    --duration-display: inline-flex;\n  }\n`;\n\nexport const ActionRow = styled(Flex)`\n  height: 5.2rem;\n  background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n  span {\n    color: inherit;\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n  position: absolute;\n  z-index: 2;\n  height: 100%;\n  width: 100%;\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper"],"mappings":";;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,MAAOC,CAAAA,GAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,MAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,MAAOQ,CAAAA,IAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,MAAOQ,CAAAA,IAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,MAAOa,CAAAA,KAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,MAAOG,CAAAA,GAAG;;;;;AAK/C;;;;"}
+{"version":3,"file":"PreviewComponents.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n  position: relative;\n`;\n\nexport const Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n\n  svg {\n    height: 26px;\n  }\n\n  img,\n  mux-player {\n    margin: 0;\n    padding: 0;\n    max-height: 26.4rem;\n    max-width: 100%;\n  }\n\n  mux-player {\n    --play-button: inline-flex;\n    --mute-button: inline-flex;\n    --pip-button: inline-flex;\n    --fullscreen-button: inline-flex;\n    --playback-rate-button: inline-flex;\n    --volume-range: inline-flex;\n    --time-range: inline-flex;\n    --time-display: inline-flex;\n    --duration-display: inline-flex;\n  }\n`;\n\nexport const ActionRow = styled(Flex)`\n  height: 5.2rem;\n  background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n  span {\n    color: inherit;\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n  position: absolute;\n  z-index: 2;\n  height: 100%;\n  width: 100%;\n`;\n\nexport const FocalPointActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\nexport const FocalPointImageWrapper = styled.div`\n  display: inline-block;\n  position: relative;\n`;\n\ninterface FocalPointAimProps {\n  $focalPoint: { x: number; y: number };\n}\n\nexport const FocalPointAim = styled.div<FocalPointAimProps>`\n  position: absolute;\n  pointer-events: none;\n  left: ${({ $focalPoint }) => $focalPoint.x}%;\n  top: ${({ $focalPoint }) => $focalPoint.y}%;\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    border: 2px solid ${({ theme }) => theme.colors.primary700};\n    border-radius: 50%;\n    background-color: ${({ theme }) => theme.colors.primary500};\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n`;\n\nexport const FocalPointHalo = styled.div`\n  &:before {\n    content: '';\n    position: absolute;\n    width: 50px;\n    height: 50px;\n    border: 1px solid ${({ theme }) => theme.colors.neutral500};\n    border-radius: 50%;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper","FocalPointActionRow","FocalPointImageWrapper","FocalPointAim","$focalPoint","x","y","primary700","primary500","FocalPointHalo","neutral500"],"mappings":";;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,MAAOC,CAAAA,GAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,MAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,MAAOQ,CAAAA,IAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,MAAOQ,CAAAA,IAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,MAAOa,CAAAA,KAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,MAAOG,CAAAA,GAAG;;;;;AAK/C;AAEac,MAAAA,mBAAAA,GAAsBjB,MAAOQ,CAAAA,IAAAA,CAAK;;;;;;AAM/C;AAEaU,MAAAA,sBAAAA,GAAyBlB,MAAOG,CAAAA,GAAG;;;AAGhD;AAMagB,MAAAA,aAAAA,GAAgBnB,MAAOG,CAAAA,GAAG;;;AAG/B,QAAA,EAAE,CAAC,EAAEiB,WAAW,EAAE,GAAKA,WAAAA,CAAYC,CAAC,CAAC;AACtC,OAAA,EAAE,CAAC,EAAED,WAAW,EAAE,GAAKA,WAAAA,CAAYE,CAAC,CAAC;;;;;;;sBAOtB,EAAE,CAAC,EAAElB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACkB,UAAU,CAAC;;sBAEzC,EAAE,CAAC,EAAEnB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACmB,UAAU,CAAC;;;;;AAK/D;AAEaC,MAAAA,cAAAA,GAAiBzB,MAAOG,CAAAA,GAAG;;;;;;sBAMlB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACqB,UAAU,CAAC;;;;;;AAM/D;;;;"}

package/dist/admin/future/App.js

@@ -14,7 +14,7 @@ require('../utils/urlYupSchema.js');
 var AIGenerationPage = require('./pages/AIGenerationPage.js');
 var MediaLibraryPage = require('./pages/MediaLibraryPage.js');
 
-const UnstableMediaLibraryPage = ()=>{
+const UnstableMediaLibrary = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const title = formatMessage({
         id: getTrad.getTrad('plugin.name'),
@@ -41,5 +41,5 @@ const UnstableMediaLibraryPage = ()=>{
     });
 };
 
-exports.UnstableMediaLibraryPage = UnstableMediaLibraryPage;
+exports.UnstableMediaLibrary = UnstableMediaLibrary;
 //# sourceMappingURL=App.js.map

package/dist/admin/future/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { getTrad } from '../utils';\n\nimport { AIGenerationPage } from './pages/AIGenerationPage';\nimport { MediaLibraryPage } from './pages/MediaLibraryPage';\n\nexport const UnstableMediaLibraryPage = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Media Library' });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<MediaLibraryPage />} />\n        <Route path=\"ai-generation\" element={<AIGenerationPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibraryPage","formatMessage","useIntl","title","id","getTrad","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","MediaLibraryPage","path","AIGenerationPage"],"mappings":";;;;;;;;;;;;;;;;MAWaA,wBAA2B,GAAA,IAAA;IACtC,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAAEG,QAAAA,EAAAA,EAAIC,eAAQ,CAAA,aAAA,CAAA;QAAgBC,cAAgB,EAAA;AAAgB,KAAA,CAAA;IAE1F,qBACEC,eAAA,CAACC,iBAAKC,IAAI,EAAA;;AACR,0BAAAC,cAAA,CAACF,iBAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbI,eAACK,CAAAA,qBAAAA,EAAAA;;kCACCF,cAACG,CAAAA,oBAAAA,EAAAA;wBAAMC,KAAK,EAAA,IAAA;AAACC,wBAAAA,OAAAA,gBAASL,cAACM,CAAAA,iCAAAA,EAAAA,EAAAA;;kCACvBN,cAACG,CAAAA,oBAAAA,EAAAA;wBAAMI,IAAK,EAAA,eAAA;AAAgBF,wBAAAA,OAAAA,gBAASL,cAACQ,CAAAA,iCAAAA,EAAAA,EAAAA;;;;;;AAI9C;;;;"}
+{"version":3,"file":"App.js","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { getTrad } from '../utils';\n\nimport { AIGenerationPage } from './pages/AIGenerationPage';\nimport { MediaLibraryPage } from './pages/MediaLibraryPage';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Media Library' });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<MediaLibraryPage />} />\n        <Route path=\"ai-generation\" element={<AIGenerationPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTrad","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","MediaLibraryPage","path","AIGenerationPage"],"mappings":";;;;;;;;;;;;;;;;MAWaA,oBAAuB,GAAA,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAAEG,QAAAA,EAAAA,EAAIC,eAAQ,CAAA,aAAA,CAAA;QAAgBC,cAAgB,EAAA;AAAgB,KAAA,CAAA;IAE1F,qBACEC,eAAA,CAACC,iBAAKC,IAAI,EAAA;;AACR,0BAAAC,cAAA,CAACF,iBAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbI,eAACK,CAAAA,qBAAAA,EAAAA;;kCACCF,cAACG,CAAAA,oBAAAA,EAAAA;wBAAMC,KAAK,EAAA,IAAA;AAACC,wBAAAA,OAAAA,gBAASL,cAACM,CAAAA,iCAAAA,EAAAA,EAAAA;;kCACvBN,cAACG,CAAAA,oBAAAA,EAAAA;wBAAMI,IAAK,EAAA,eAAA;AAAgBF,wBAAAA,OAAAA,gBAASL,cAACQ,CAAAA,iCAAAA,EAAAA,EAAAA;;;;;;AAI9C;;;;"}

package/dist/admin/future/App.mjs

@@ -12,7 +12,7 @@ import '../utils/urlYupSchema.mjs';
 import { AIGenerationPage } from './pages/AIGenerationPage.mjs';
 import { MediaLibraryPage } from './pages/MediaLibraryPage.mjs';
 
-const UnstableMediaLibraryPage = ()=>{
+const UnstableMediaLibrary = ()=>{
     const { formatMessage } = useIntl();
     const title = formatMessage({
         id: getTrad('plugin.name'),
@@ -39,5 +39,5 @@ const UnstableMediaLibraryPage = ()=>{
     });
 };
 
-export { UnstableMediaLibraryPage };
+export { UnstableMediaLibrary };
 //# sourceMappingURL=App.mjs.map

package/dist/admin/future/App.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"App.mjs","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { getTrad } from '../utils';\n\nimport { AIGenerationPage } from './pages/AIGenerationPage';\nimport { MediaLibraryPage } from './pages/MediaLibraryPage';\n\nexport const UnstableMediaLibraryPage = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Media Library' });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<MediaLibraryPage />} />\n        <Route path=\"ai-generation\" element={<AIGenerationPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibraryPage","formatMessage","useIntl","title","id","getTrad","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","MediaLibraryPage","path","AIGenerationPage"],"mappings":";;;;;;;;;;;;;;MAWaA,wBAA2B,GAAA,IAAA;IACtC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAAEG,QAAAA,EAAAA,EAAIC,OAAQ,CAAA,aAAA,CAAA;QAAgBC,cAAgB,EAAA;AAAgB,KAAA,CAAA;IAE1F,qBACEC,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAC,GAAA,CAACF,KAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbI,IAACK,CAAAA,MAAAA,EAAAA;;kCACCF,GAACG,CAAAA,KAAAA,EAAAA;wBAAMC,KAAK,EAAA,IAAA;AAACC,wBAAAA,OAAAA,gBAASL,GAACM,CAAAA,gBAAAA,EAAAA,EAAAA;;kCACvBN,GAACG,CAAAA,KAAAA,EAAAA;wBAAMI,IAAK,EAAA,eAAA;AAAgBF,wBAAAA,OAAAA,gBAASL,GAACQ,CAAAA,gBAAAA,EAAAA,EAAAA;;;;;;AAI9C;;;;"}
+{"version":3,"file":"App.mjs","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { getTrad } from '../utils';\n\nimport { AIGenerationPage } from './pages/AIGenerationPage';\nimport { MediaLibraryPage } from './pages/MediaLibraryPage';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Media Library' });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<MediaLibraryPage />} />\n        <Route path=\"ai-generation\" element={<AIGenerationPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTrad","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","MediaLibraryPage","path","AIGenerationPage"],"mappings":";;;;;;;;;;;;;;MAWaA,oBAAuB,GAAA,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAc,CAAA;AAAEG,QAAAA,EAAAA,EAAIC,OAAQ,CAAA,aAAA,CAAA;QAAgBC,cAAgB,EAAA;AAAgB,KAAA,CAAA;IAE1F,qBACEC,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAC,GAAA,CAACF,KAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbI,IAACK,CAAAA,MAAAA,EAAAA;;kCACCF,GAACG,CAAAA,KAAAA,EAAAA;wBAAMC,KAAK,EAAA,IAAA;AAACC,wBAAAA,OAAAA,gBAASL,GAACM,CAAAA,gBAAAA,EAAAA,EAAAA;;kCACvBN,GAACG,CAAAA,KAAAA,EAAAA;wBAAMI,IAAK,EAAA,eAAA;AAAgBF,wBAAAA,OAAAA,gBAASL,GAACQ,CAAAA,gBAAAA,EAAAA,EAAAA;;;;;;AAI9C;;;;"}

package/dist/admin/future/pages/MediaLibraryPage.js

@@ -1,54 +1,118 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-require('byte-size');
-require('date-fns');
-var getTrad = require('../../utils/getTrad.js');
-require('qs');
-require('../../utils/typeFromMime.js');
-require('../../utils/urlYupSchema.js');
+var api = require('../services/api.js');
+var translations = require('../utils/translations.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const MediaLibraryPage = ()=>{
     const { formatMessage } = reactIntl.useIntl();
-    return(/**
-     * NOTE:
-     *
-     * The design differs from our current Layouts component.
-     * Either we find a way to make it work with our current Layouts component
-     * or we will have to write our own custom layout.
-     */ /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const { _unstableFormatAPIError } = strapiAdmin.useAPIErrorHandler();
+    const fileInputRef = React__namespace.useRef(null);
+    const [uploadFiles] = api.useUploadFilesMutation();
+    const handleFileSelect = ()=>{
+        fileInputRef.current?.click();
+    };
+    const handleFileChange = async (e)=>{
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            const formData = new FormData();
+            const filesArray = Array.from(files);
+            // Add files and fileInfo to the form data
+            filesArray.forEach((file)=>{
+                formData.append('files', file);
+                formData.append('fileInfo', JSON.stringify({
+                    name: file.name,
+                    caption: null,
+                    alternativeText: null,
+                    folder: null
+                }));
+            });
+            try {
+                // unwrap() is needed to throw errors and trigger the catch block
+                // Without it, RTK Query never rejects and catch would never execute
+                await uploadFiles(formData).unwrap();
+                toggleNotification({
+                    type: 'success',
+                    message: formatMessage({
+                        id: translations.getTranslationKey('assets.uploaded'),
+                        defaultMessage: '{number, plural, one {# asset} other {# assets}} uploaded successfully'
+                    }, {
+                        number: filesArray.length
+                    })
+                });
+            } catch (error) {
+                // Format the error message using the API error handler to provide
+                // context-specific feedback (e.g., file size limits, format restrictions, network errors)
+                const errorMessage = _unstableFormatAPIError(error);
+                toggleNotification({
+                    type: 'danger',
+                    message: errorMessage
+                });
+            }
+        }
+        // Reset input so the same file can be selected again
+        e.target.value = '';
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
         children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+                    type: "file",
+                    ref: fileInputRef,
+                    onChange: handleFileChange,
+                    multiple: true
+                })
+            }),
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
-                navigationAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                    children: "TODO: Breadcrumbs"
-                }),
                 title: "TODO: Folder location",
-                primaryAction: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    gap: 2,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SearchInput, {
-                            label: formatMessage({
-                                id: getTrad.getTrad('search.label'),
-                                defaultMessage: 'Search for an asset'
-                            }),
-                            trackedEvent: "didSearchMediaLibraryElements",
-                            trackedEventDetails: {
-                                location: 'upload'
-                            }
-                        }),
-                        "TODO: Toolbar"
-                    ]
+                primaryAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.SimpleMenu, {
+                    popoverPlacement: "bottom-end",
+                    variant: "default",
+                    endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {}),
+                    label: formatMessage({
+                        id: translations.getTranslationKey('new'),
+                        defaultMessage: 'New'
+                    }),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                        onSelect: handleFileSelect,
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
+                        children: formatMessage({
+                            id: translations.getTranslationKey('import-files'),
+                            defaultMessage: 'Import files'
+                        })
+                    })
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
                 children: "TODO: List/Grid views"
             })
         ]
-    }));
+    });
 };
 
 exports.MediaLibraryPage = MediaLibraryPage;

package/dist/admin/future/pages/MediaLibraryPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaLibraryPage.js","sources":["../../../../admin/src/future/pages/MediaLibraryPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Layouts, SearchInput } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\nexport const MediaLibraryPage = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    /**\n     * NOTE:\n     *\n     * The design differs from our current Layouts component.\n     * Either we find a way to make it work with our current Layouts component\n     * or we will have to write our own custom layout.\n     */\n    <Layouts.Root>\n      <Layouts.Header\n        navigationAction={<Box>TODO: Breadcrumbs</Box>}\n        title=\"TODO: Folder location\"\n        primaryAction={\n          <Flex gap={2}>\n            <SearchInput\n              label={formatMessage({\n                id: getTrad('search.label'),\n                defaultMessage: 'Search for an asset',\n              })}\n              trackedEvent=\"didSearchMediaLibraryElements\"\n              trackedEventDetails={{ location: 'upload' }}\n            />\n            TODO: Toolbar\n          </Flex>\n        }\n      />\n\n      <Layouts.Content>TODO: List/Grid views</Layouts.Content>\n    </Layouts.Root>\n  );\n};\n"],"names":["MediaLibraryPage","formatMessage","useIntl","_jsxs","Layouts","Root","_jsx","Header","navigationAction","Box","title","primaryAction","Flex","gap","SearchInput","label","id","getTrad","defaultMessage","trackedEvent","trackedEventDetails","location","Content"],"mappings":";;;;;;;;;;;;;;MAQaA,gBAAmB,GAAA,IAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B;;;;;;sBAQEC,eAAA,CAACC,oBAAQC,IAAI,EAAA;;AACX,0BAAAC,cAAA,CAACF,oBAAQG,MAAM,EAAA;AACbC,gBAAAA,gBAAAA,gBAAkBF,cAACG,CAAAA,gBAAAA,EAAAA;AAAI,oBAAA,QAAA,EAAA;;gBACvBC,KAAM,EAAA,uBAAA;AACNC,gBAAAA,aAAAA,gBACER,eAACS,CAAAA,iBAAAA,EAAAA;oBAAKC,GAAK,EAAA,CAAA;;sCACTP,cAACQ,CAAAA,uBAAAA,EAAAA;AACCC,4BAAAA,KAAAA,EAAOd,aAAc,CAAA;AACnBe,gCAAAA,EAAAA,EAAIC,eAAQ,CAAA,cAAA,CAAA;gCACZC,cAAgB,EAAA;AAClB,6BAAA,CAAA;4BACAC,YAAa,EAAA,+BAAA;4BACbC,mBAAqB,EAAA;gCAAEC,QAAU,EAAA;AAAS;;AAC1C,wBAAA;;;;AAMR,0BAAAf,cAAA,CAACF,oBAAQkB,OAAO,EAAA;AAAC,gBAAA,QAAA,EAAA;;;;AAGvB;;;;"}
+{"version":3,"file":"MediaLibraryPage.js","sources":["../../../../admin/src/future/pages/MediaLibraryPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Layouts, useNotification, useAPIErrorHandler } from '@strapi/admin/strapi-admin';\nimport { MenuItem, SimpleMenu, VisuallyHidden } from '@strapi/design-system';\nimport { ChevronDown, Files } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useUploadFilesMutation } from '../services/api';\nimport { getTranslationKey } from '../utils/translations';\n\nexport const MediaLibraryPage = () => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError } = useAPIErrorHandler();\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n  const [uploadFiles] = useUploadFilesMutation();\n\n  const handleFileSelect = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files;\n    if (files && files.length > 0) {\n      const formData = new FormData();\n      const filesArray = Array.from(files);\n\n      // Add files and fileInfo to the form data\n      filesArray.forEach((file) => {\n        formData.append('files', file);\n        formData.append(\n          'fileInfo',\n          JSON.stringify({\n            name: file.name,\n            caption: null,\n            alternativeText: null,\n            folder: null,\n          })\n        );\n      });\n\n      try {\n        // unwrap() is needed to throw errors and trigger the catch block\n        // Without it, RTK Query never rejects and catch would never execute\n        await uploadFiles(formData).unwrap();\n        toggleNotification({\n          type: 'success',\n          message: formatMessage(\n            {\n              id: getTranslationKey('assets.uploaded'),\n              defaultMessage:\n                '{number, plural, one {# asset} other {# assets}} uploaded successfully',\n            },\n            { number: filesArray.length }\n          ),\n        });\n      } catch (error) {\n        // Format the error message using the API error handler to provide\n        // context-specific feedback (e.g., file size limits, format restrictions, network errors)\n        const errorMessage = _unstableFormatAPIError(error as Error);\n        toggleNotification({\n          type: 'danger',\n          message: errorMessage,\n        });\n      }\n    }\n    // Reset input so the same file can be selected again\n    e.target.value = '';\n  };\n\n  return (\n    <Layouts.Root>\n      <VisuallyHidden>\n        <input type=\"file\" ref={fileInputRef} onChange={handleFileChange} multiple />\n      </VisuallyHidden>\n      <Layouts.Header\n        title=\"TODO: Folder location\"\n        primaryAction={\n          <SimpleMenu\n            popoverPlacement=\"bottom-end\"\n            variant=\"default\"\n            endIcon={<ChevronDown />}\n            label={formatMessage({ id: getTranslationKey('new'), defaultMessage: 'New' })}\n          >\n            <MenuItem onSelect={handleFileSelect} startIcon={<Files />}>\n              {formatMessage({\n                id: getTranslationKey('import-files'),\n                defaultMessage: 'Import files',\n              })}\n            </MenuItem>\n          </SimpleMenu>\n        }\n      />\n\n      <Layouts.Content>TODO: List/Grid views</Layouts.Content>\n    </Layouts.Root>\n  );\n};\n"],"names":["MediaLibraryPage","formatMessage","useIntl","toggleNotification","useNotification","_unstableFormatAPIError","useAPIErrorHandler","fileInputRef","React","useRef","uploadFiles","useUploadFilesMutation","handleFileSelect","current","click","handleFileChange","e","files","target","length","formData","FormData","filesArray","Array","from","forEach","file","append","JSON","stringify","name","caption","alternativeText","folder","unwrap","type","message","id","getTranslationKey","defaultMessage","number","error","errorMessage","value","_jsxs","Layouts","Root","_jsx","VisuallyHidden","input","ref","onChange","multiple","Header","title","primaryAction","SimpleMenu","popoverPlacement","variant","endIcon","ChevronDown","label","MenuItem","onSelect","startIcon","Files","Content"],"mappings":"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"}