@strapi/upload 5.29.0 → 5.30.1

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

@@ -1 +1 @@
-{"version":3,"file":"EditAssetContent.mjs","sources":["../../../../admin/src/components/EditAssetDialog/EditAssetContent.tsx"],"sourcesContent":["/**\n *\n * EditAssetDialog\n *\n */\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport {\n  Button,\n  Field,\n  Flex,\n  Grid,\n  Loader,\n  Modal,\n  TextInput,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport isEqual from 'lodash/isEqual';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\nimport * as yup from 'yup';\n\nimport { useEditAsset } from '../../hooks/useEditAsset';\nimport { useFolderStructure } from '../../hooks/useFolderStructure';\nimport { findRecursiveFolderByValue, getTrad, getFileExtension, formatBytes } from '../../utils';\nimport { ContextInfo } from '../ContextInfo/ContextInfo';\nimport { SelectTree } from '../SelectTree/SelectTree';\n\nimport { DialogHeader } from './DialogHeader';\nimport { PreviewBox } from './PreviewBox/PreviewBox';\nimport { ReplaceMediaButton } from './ReplaceMediaButton';\n\nimport type { File as FileDefinition, RawFile } from '../../../../shared/contracts/files';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60dvh + 8rem)`};\n`;\n\nconst fileInfoSchema = yup.object({\n  name: yup.string().required(),\n  alternativeText: yup.string(),\n  caption: yup.string(),\n  folder: yup.number(),\n});\n\nexport interface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface EditAssetContentProps {\n  asset?: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  onClose: (arg?: Asset | null | boolean) => void;\n  omitFields?: ('caption' | 'alternativeText')[];\n  omitActions?: 'replace'[];\n}\n\ninterface FormInitialData {\n  name?: string;\n  alternativeText?: string;\n  caption?: string;\n  parent?: {\n    value?: number;\n    label: string;\n  };\n}\n\nexport const EditAssetContent = ({\n  onClose,\n  asset,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  trackedLocation,\n  omitFields = [],\n  omitActions = [],\n}: EditAssetContentProps) => {\n  const { formatMessage, formatDate } = useIntl();\n  const { trackUsage } = useTracking();\n  const submitButtonRef = React.useRef<HTMLButtonElement>(null);\n  const [isCropping, setIsCropping] = React.useState(false);\n  const [replacementFile, setReplacementFile] = React.useState<File | undefined>();\n  const { editAsset, isLoading } = useEditAsset();\n\n  const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({\n    enabled: true,\n  });\n\n  const handleSubmit = async (values: FormInitialData) => {\n    const nextAsset = { ...asset, ...values, folder: values.parent?.value } as Asset;\n\n    if (asset?.isLocal) {\n      onClose(nextAsset);\n    } else {\n      const editedAsset = (await editAsset(nextAsset, replacementFile!)) as Asset;\n\n      const assetType = asset?.mime?.split('/')[0];\n      // if the folder parent was the root of Media Library, its id is null\n      // we know it changed location if the new parent value exists\n      const didChangeLocation = asset?.folder?.id\n        ? asset.folder.id !== values.parent?.value\n        : asset?.folder === null && !!values.parent?.value;\n\n      trackUsage('didEditMediaLibraryElements', {\n        location: trackedLocation,\n        type: assetType,\n        changeLocation: didChangeLocation,\n      });\n\n      onClose(editedAsset);\n    }\n  };\n\n  const handleStartCropping = () => {\n    setIsCropping(true);\n  };\n\n  const handleCancelCropping = () => {\n    setIsCropping(false);\n  };\n\n  const handleFinishCropping = () => {\n    setIsCropping(false);\n    onClose();\n  };\n\n  const formDisabled = !canUpdate || isCropping;\n\n  const handleConfirmClose = () => {\n    // eslint-disable-next-line no-alert\n    const confirm = window.confirm(\n      formatMessage({\n        id: 'window.confirm.close-modal.file',\n        defaultMessage: 'Are you sure? Your changes will be lost.',\n      })\n    );\n\n    if (confirm) {\n      onClose();\n    }\n  };\n\n  const activeFolderId = asset?.folder?.id;\n  const initialFormData = !folderStructureIsLoading && {\n    name: asset?.name,\n    alternativeText: asset?.alternativeText ?? undefined,\n    caption: asset?.caption ?? undefined,\n    parent: {\n      value: activeFolderId ?? undefined,\n      label:\n        findRecursiveFolderByValue(folderStructure!, activeFolderId!)?.label ??\n        folderStructure![0].label,\n    },\n  };\n\n  const handleClose = (values?: { [key: string]: unknown }) => {\n    if (!isEqual(initialFormData, values)) {\n      handleConfirmClose();\n    } else {\n      onClose();\n    }\n  };\n\n  if (folderStructureIsLoading) {\n    return (\n      <>\n        <DialogHeader />\n        <LoadingBody minHeight=\"60vh\" justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <Modal.Footer>\n          <Button onClick={() => handleClose()} variant=\"tertiary\">\n            {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}\n          </Button>\n        </Modal.Footer>\n      </>\n    );\n  }\n\n  return (\n    <Formik\n      validationSchema={fileInfoSchema}\n      validateOnChange={false}\n      onSubmit={handleSubmit}\n      initialValues={initialFormData}\n    >\n      {({ values, errors, handleChange, setFieldValue }) => (\n        <>\n          <DialogHeader />\n          <Modal.Body>\n            <Grid.Root gap={4}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <PreviewBox\n                  asset={asset!}\n                  canUpdate={canUpdate}\n                  canCopyLink={canCopyLink}\n                  canDownload={canDownload}\n                  onDelete={onClose}\n                  onCropFinish={handleFinishCropping}\n                  onCropStart={handleStartCropping}\n                  onCropCancel={handleCancelCropping}\n                  replacementFile={replacementFile}\n                  trackedLocation={trackedLocation}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Form noValidate>\n                  <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n                    <ContextInfo\n                      blocks={[\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.size'),\n                            defaultMessage: 'Size',\n                          }),\n                          value: formatBytes(asset?.size ? asset.size : 0),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.dimensions'),\n                            defaultMessage: 'Dimensions',\n                          }),\n                          value:\n                            asset?.height && asset.width ? `${asset.width}✕${asset.height}` : null,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.date'),\n                            defaultMessage: 'Date',\n                          }),\n                          value: formatDate(new Date(asset?.createdAt ? asset.createdAt : '')),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.extension'),\n                            defaultMessage: 'Extension',\n                          }),\n                          value: getFileExtension(asset?.ext)!,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.id'),\n                            defaultMessage: 'Asset ID',\n                          }),\n                          value: asset?.id ? asset.id : null,\n                        },\n                      ]}\n                    />\n                    <Field.Root name=\"name\" error={errors.name}>\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-name'),\n                          defaultMessage: 'File name',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.name}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                      />\n                      <Field.Error />\n                    </Field.Root>\n\n                    {!omitFields?.includes('alternativeText') && (\n                      <Field.Root\n                        name=\"alternativeText\"\n                        hint={formatMessage({\n                          id: getTrad('form.input.description.file-alt'),\n                          defaultMessage:\n                            'This text will be displayed if the asset can’t be shown.',\n                        })}\n                        error={errors.alternativeText}\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-alt'),\n                            defaultMessage: 'Alternative text',\n                          })}\n                        </Field.Label>\n                        <TextInput\n                          value={values.alternativeText}\n                          onChange={handleChange}\n                          disabled={formDisabled}\n                        />\n                        <Field.Hint />\n                        <Field.Error />\n                      </Field.Root>\n                    )}\n\n                    {!omitFields?.includes('caption') && (\n                      <Field.Root name=\"caption\" error={errors.caption}>\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-caption'),\n                            defaultMessage: 'Caption',\n                          })}\n                        </Field.Label>\n                        <TextInput\n                          value={values.caption}\n                          onChange={handleChange}\n                          disabled={formDisabled}\n                        />\n                      </Field.Root>\n                    )}\n\n                    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n                      <Field.Root name=\"parent\" id=\"asset-folder\">\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-location'),\n                            defaultMessage: 'Location',\n                          })}\n                        </Field.Label>\n\n                        <SelectTree\n                          name=\"parent\"\n                          defaultValue={values.parent}\n                          options={folderStructure!}\n                          onChange={(value) => {\n                            setFieldValue('parent', value);\n                          }}\n                          menuPortalTarget={document.querySelector('body')}\n                          inputId=\"asset-folder\"\n                          isDisabled={formDisabled}\n                          error={errors?.parent}\n                          ariaErrorMessage=\"folder-parent-error\"\n                        />\n                      </Field.Root>\n                    </Flex>\n                  </Flex>\n\n                  <VisuallyHidden>\n                    <button\n                      type=\"submit\"\n                      tabIndex={-1}\n                      ref={submitButtonRef}\n                      disabled={formDisabled}\n                    >\n                      {formatMessage({ id: 'submit', defaultMessage: 'Submit' })}\n                    </button>\n                  </VisuallyHidden>\n                </Form>\n              </Grid.Item>\n            </Grid.Root>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button onClick={() => handleClose({ ...values })} variant=\"tertiary\">\n              {formatMessage({ id: 'global.cancel', defaultMessage: 'Cancel' })}\n            </Button>\n            <Flex gap={2}>\n              {!omitActions?.includes('replace') && (\n                <ReplaceMediaButton\n                  onSelectMedia={setReplacementFile}\n                  acceptedMime={asset?.mime ?? ''}\n                  disabled={formDisabled}\n                  trackedLocation={trackedLocation}\n                />\n              )}\n\n              <Button\n                onClick={() => submitButtonRef.current?.click()}\n                loading={isLoading}\n                disabled={formDisabled}\n              >\n                {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n              </Button>\n            </Flex>\n          </Modal.Footer>\n        </>\n      )}\n    </Formik>\n  );\n};\n\ninterface EditAssetDialogProps {\n  asset: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  open: boolean;\n  onClose: (arg?: Asset | null | boolean) => void;\n}\n\nexport const EditAssetDialog = ({\n  open,\n  onClose,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  ...restProps\n}: EditAssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <EditAssetContent\n          onClose={onClose}\n          canUpdate={canUpdate}\n          canCopyLink={canCopyLink}\n          canDownload={canDownload}\n          {...restProps}\n        />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["LoadingBody","styled","Flex","fileInfoSchema","yup","object","name","string","required","alternativeText","caption","folder","number","EditAssetContent","onClose","asset","canUpdate","canCopyLink","canDownload","trackedLocation","omitFields","omitActions","formatMessage","formatDate","useIntl","trackUsage","useTracking","submitButtonRef","React","useRef","isCropping","setIsCropping","useState","replacementFile","setReplacementFile","editAsset","isLoading","useEditAsset","data","folderStructure","folderStructureIsLoading","useFolderStructure","enabled","handleSubmit","values","nextAsset","parent","value","isLocal","editedAsset","assetType","mime","split","didChangeLocation","id","location","type","changeLocation","handleStartCropping","handleCancelCropping","handleFinishCropping","formDisabled","handleConfirmClose","confirm","window","defaultMessage","activeFolderId","initialFormData","undefined","label","findRecursiveFolderByValue","handleClose","isEqual","_jsxs","_Fragment","_jsx","DialogHeader","minHeight","justifyContent","paddingTop","paddingBottom","Loader","getTrad","Modal","Footer","Button","onClick","variant","Formik","validationSchema","validateOnChange","onSubmit","initialValues","errors","handleChange","setFieldValue","Body","Grid","Root","gap","Item","xs","col","direction","alignItems","PreviewBox","onDelete","onCropFinish","onCropStart","onCropCancel","Form","noValidate","ContextInfo","blocks","formatBytes","size","height","width","Date","createdAt","getFileExtension","ext","Field","error","Label","TextInput","onChange","disabled","Error","includes","hint","Hint","SelectTree","defaultValue","options","menuPortalTarget","document","querySelector","inputId","isDisabled","ariaErrorMessage","VisuallyHidden","button","tabIndex","ref","ReplaceMediaButton","onSelectMedia","acceptedMime","current","click","loading","EditAssetDialog","open","restProps","onOpenChange","Content"],"mappings":"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"}
+{"version":3,"file":"EditAssetContent.mjs","sources":["../../../../admin/src/components/EditAssetDialog/EditAssetContent.tsx"],"sourcesContent":["/**\n *\n * EditAssetDialog\n *\n */\nimport * as React from 'react';\n\nimport {\n  Button,\n  Field,\n  Flex,\n  Grid,\n  Loader,\n  Modal,\n  TextInput,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport isEqual from 'lodash/isEqual';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\nimport * as yup from 'yup';\n\nimport { useEditAsset } from '../../hooks/useEditAsset';\nimport { useFolderStructure } from '../../hooks/useFolderStructure';\nimport { useTracking } from '../../hooks/useTracking';\nimport { findRecursiveFolderByValue, getTrad, getFileExtension, formatBytes } from '../../utils';\nimport { ContextInfo } from '../ContextInfo/ContextInfo';\nimport { SelectTree } from '../SelectTree/SelectTree';\n\nimport { DialogHeader } from './DialogHeader';\nimport { PreviewBox } from './PreviewBox/PreviewBox';\nimport { ReplaceMediaButton } from './ReplaceMediaButton';\n\nimport type { File as FileDefinition, RawFile } from '../../../../shared/contracts/files';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60dvh + 8rem)`};\n`;\n\nconst fileInfoSchema = yup.object({\n  name: yup.string().required(),\n  alternativeText: yup.string(),\n  caption: yup.string(),\n  folder: yup.number(),\n});\n\nexport interface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface EditAssetContentProps {\n  asset?: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  onClose: (arg?: Asset | null | boolean) => void;\n  omitFields?: ('caption' | 'alternativeText')[];\n  omitActions?: 'replace'[];\n}\n\ninterface FormInitialData {\n  name?: string;\n  alternativeText?: string;\n  caption?: string;\n  parent?: {\n    value?: number;\n    label: string;\n  };\n}\n\nexport const EditAssetContent = ({\n  onClose,\n  asset,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  trackedLocation,\n  omitFields = [],\n  omitActions = [],\n}: EditAssetContentProps) => {\n  const { formatMessage, formatDate } = useIntl();\n  const { trackUsage } = useTracking();\n  const submitButtonRef = React.useRef<HTMLButtonElement>(null);\n  const [isCropping, setIsCropping] = React.useState(false);\n  const [replacementFile, setReplacementFile] = React.useState<File | undefined>();\n  const { editAsset, isLoading } = useEditAsset();\n\n  const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({\n    enabled: true,\n  });\n\n  const handleSubmit = async (values: FormInitialData) => {\n    const nextAsset = { ...asset, ...values, folder: values.parent?.value } as Asset;\n\n    if (asset?.isLocal) {\n      onClose(nextAsset);\n    } else {\n      const editedAsset = (await editAsset(nextAsset, replacementFile!)) as Asset;\n\n      const assetType = asset?.mime?.split('/')[0];\n      // if the folder parent was the root of Media Library, its id is null\n      // we know it changed location if the new parent value exists\n      const didChangeLocation = asset?.folder?.id\n        ? asset.folder.id !== values.parent?.value\n        : asset?.folder === null && !!values.parent?.value;\n\n      trackUsage('didEditMediaLibraryElements', {\n        location: trackedLocation,\n        type: assetType,\n        changeLocation: didChangeLocation,\n      });\n\n      onClose(editedAsset);\n    }\n  };\n\n  const handleStartCropping = () => {\n    setIsCropping(true);\n  };\n\n  const handleCancelCropping = () => {\n    setIsCropping(false);\n  };\n\n  const handleFinishCropping = () => {\n    setIsCropping(false);\n    onClose();\n  };\n\n  const formDisabled = !canUpdate || isCropping;\n\n  const handleConfirmClose = () => {\n    // eslint-disable-next-line no-alert\n    const confirm = window.confirm(\n      formatMessage({\n        id: 'window.confirm.close-modal.file',\n        defaultMessage: 'Are you sure? Your changes will be lost.',\n      })\n    );\n\n    if (confirm) {\n      onClose();\n    }\n  };\n\n  const activeFolderId = asset?.folder?.id;\n  const initialFormData = !folderStructureIsLoading && {\n    name: asset?.name,\n    alternativeText: asset?.alternativeText ?? undefined,\n    caption: asset?.caption ?? undefined,\n    parent: {\n      value: activeFolderId ?? undefined,\n      label:\n        findRecursiveFolderByValue(folderStructure!, activeFolderId!)?.label ??\n        folderStructure![0].label,\n    },\n  };\n\n  const handleClose = (values?: { [key: string]: unknown }) => {\n    if (!isEqual(initialFormData, values)) {\n      handleConfirmClose();\n    } else {\n      onClose();\n    }\n  };\n\n  if (folderStructureIsLoading) {\n    return (\n      <>\n        <DialogHeader />\n        <LoadingBody minHeight=\"60vh\" justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <Modal.Footer>\n          <Button onClick={() => handleClose()} variant=\"tertiary\">\n            {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}\n          </Button>\n        </Modal.Footer>\n      </>\n    );\n  }\n\n  return (\n    <Formik\n      validationSchema={fileInfoSchema}\n      validateOnChange={false}\n      onSubmit={handleSubmit}\n      initialValues={initialFormData}\n    >\n      {({ values, errors, handleChange, setFieldValue }) => (\n        <>\n          <DialogHeader />\n          <Modal.Body>\n            <Grid.Root gap={4}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <PreviewBox\n                  asset={asset!}\n                  canUpdate={canUpdate}\n                  canCopyLink={canCopyLink}\n                  canDownload={canDownload}\n                  onDelete={onClose}\n                  onCropFinish={handleFinishCropping}\n                  onCropStart={handleStartCropping}\n                  onCropCancel={handleCancelCropping}\n                  replacementFile={replacementFile}\n                  trackedLocation={trackedLocation}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Form noValidate>\n                  <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n                    <ContextInfo\n                      blocks={[\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.size'),\n                            defaultMessage: 'Size',\n                          }),\n                          value: formatBytes(asset?.size ? asset.size : 0),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.dimensions'),\n                            defaultMessage: 'Dimensions',\n                          }),\n                          value:\n                            asset?.height && asset.width ? `${asset.width}✕${asset.height}` : null,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.date'),\n                            defaultMessage: 'Date',\n                          }),\n                          value: formatDate(new Date(asset?.createdAt ? asset.createdAt : '')),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.extension'),\n                            defaultMessage: 'Extension',\n                          }),\n                          value: getFileExtension(asset?.ext)!,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.id'),\n                            defaultMessage: 'Asset ID',\n                          }),\n                          value: asset?.id ? asset.id : null,\n                        },\n                      ]}\n                    />\n                    <Field.Root name=\"name\" error={errors.name}>\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-name'),\n                          defaultMessage: 'File name',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.name}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                        type=\"text\"\n                      />\n                      <Field.Error />\n                    </Field.Root>\n\n                    {!omitFields?.includes('alternativeText') && (\n                      <Field.Root\n                        name=\"alternativeText\"\n                        hint={formatMessage({\n                          id: getTrad('form.input.description.file-alt'),\n                          defaultMessage:\n                            'This text will be displayed if the asset can’t be shown.',\n                        })}\n                        error={errors.alternativeText}\n                      >\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-alt'),\n                            defaultMessage: 'Alternative text',\n                          })}\n                        </Field.Label>\n                        <TextInput\n                          value={values.alternativeText}\n                          onChange={handleChange}\n                          disabled={formDisabled}\n                          type=\"text\"\n                        />\n                        <Field.Hint />\n                        <Field.Error />\n                      </Field.Root>\n                    )}\n\n                    {!omitFields?.includes('caption') && (\n                      <Field.Root name=\"caption\" error={errors.caption}>\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-caption'),\n                            defaultMessage: 'Caption',\n                          })}\n                        </Field.Label>\n                        <TextInput\n                          value={values.caption}\n                          onChange={handleChange}\n                          disabled={formDisabled}\n                          type=\"text\"\n                        />\n                      </Field.Root>\n                    )}\n\n                    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n                      <Field.Root name=\"parent\" id=\"asset-folder\">\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-location'),\n                            defaultMessage: 'Location',\n                          })}\n                        </Field.Label>\n\n                        <SelectTree\n                          name=\"parent\"\n                          defaultValue={values.parent}\n                          options={folderStructure!}\n                          onChange={(value) => {\n                            setFieldValue('parent', value);\n                          }}\n                          menuPortalTarget={document.querySelector('body')}\n                          inputId=\"asset-folder\"\n                          isDisabled={formDisabled}\n                          error={errors?.parent}\n                          ariaErrorMessage=\"folder-parent-error\"\n                        />\n                      </Field.Root>\n                    </Flex>\n                  </Flex>\n\n                  <VisuallyHidden>\n                    <button\n                      type=\"submit\"\n                      tabIndex={-1}\n                      ref={submitButtonRef}\n                      disabled={formDisabled}\n                    >\n                      {formatMessage({ id: 'submit', defaultMessage: 'Submit' })}\n                    </button>\n                  </VisuallyHidden>\n                </Form>\n              </Grid.Item>\n            </Grid.Root>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button onClick={() => handleClose({ ...values })} variant=\"tertiary\">\n              {formatMessage({ id: 'global.cancel', defaultMessage: 'Cancel' })}\n            </Button>\n            <Flex gap={2}>\n              {!omitActions?.includes('replace') && (\n                <ReplaceMediaButton\n                  onSelectMedia={setReplacementFile}\n                  acceptedMime={asset?.mime ?? ''}\n                  disabled={formDisabled}\n                  trackedLocation={trackedLocation}\n                />\n              )}\n\n              <Button\n                onClick={() => submitButtonRef.current?.click()}\n                loading={isLoading}\n                disabled={formDisabled}\n              >\n                {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n              </Button>\n            </Flex>\n          </Modal.Footer>\n        </>\n      )}\n    </Formik>\n  );\n};\n\ninterface EditAssetDialogProps {\n  asset: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  open: boolean;\n  onClose: (arg?: Asset | null | boolean) => void;\n}\n\nexport const EditAssetDialog = ({\n  open,\n  onClose,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  ...restProps\n}: EditAssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <EditAssetContent\n          onClose={onClose}\n          canUpdate={canUpdate}\n          canCopyLink={canCopyLink}\n          canDownload={canDownload}\n          {...restProps}\n        />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["LoadingBody","styled","Flex","fileInfoSchema","yup","object","name","string","required","alternativeText","caption","folder","number","EditAssetContent","onClose","asset","canUpdate","canCopyLink","canDownload","trackedLocation","omitFields","omitActions","formatMessage","formatDate","useIntl","trackUsage","useTracking","submitButtonRef","React","useRef","isCropping","setIsCropping","useState","replacementFile","setReplacementFile","editAsset","isLoading","useEditAsset","data","folderStructure","folderStructureIsLoading","useFolderStructure","enabled","handleSubmit","values","nextAsset","parent","value","isLocal","editedAsset","assetType","mime","split","didChangeLocation","id","location","type","changeLocation","handleStartCropping","handleCancelCropping","handleFinishCropping","formDisabled","handleConfirmClose","confirm","window","defaultMessage","activeFolderId","initialFormData","undefined","label","findRecursiveFolderByValue","handleClose","isEqual","_jsxs","_Fragment","_jsx","DialogHeader","minHeight","justifyContent","paddingTop","paddingBottom","Loader","getTrad","Modal","Footer","Button","onClick","variant","Formik","validationSchema","validateOnChange","onSubmit","initialValues","errors","handleChange","setFieldValue","Body","Grid","Root","gap","Item","xs","col","direction","alignItems","PreviewBox","onDelete","onCropFinish","onCropStart","onCropCancel","Form","noValidate","ContextInfo","blocks","formatBytes","size","height","width","Date","createdAt","getFileExtension","ext","Field","error","Label","TextInput","onChange","disabled","Error","includes","hint","Hint","SelectTree","defaultValue","options","menuPortalTarget","document","querySelector","inputId","isDisabled","ariaErrorMessage","VisuallyHidden","button","tabIndex","ref","ReplaceMediaButton","onSelectMedia","acceptedMime","current","click","loading","EditAssetDialog","open","restProps","onOpenChange","Content"],"mappings":"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"}

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

@@ -4,10 +4,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var MuxPlayer = require('@mux/mux-player-react');
 var designSystem = require('@strapi/design-system');
-var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
-var constants = require('../../../constants.js');
+var enums = require('../../../enums.js');
+require('byte-size');
+require('date-fns');
+require('qs');
+var typeFromMime = require('../../../utils/typeFromMime.js');
+require('../../../utils/urlYupSchema.js');
+var icons = require('../../../utils/icons.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -39,8 +44,9 @@ const CardAsset = styledComponents.styled(designSystem.Flex)`
 `;
 const AssetPreview = /*#__PURE__*/ React__namespace.forwardRef(({ mime, url, name, ...props }, ref)=>{
     const theme = styledComponents.useTheme();
+    const assetType = typeFromMime.typeFromMime(mime);
     const { formatMessage } = reactIntl.useIntl();
-    if (mime.includes(constants.AssetType.Image)) {
+    if (assetType === enums.AssetType.Image) {
         return /*#__PURE__*/ jsxRuntime.jsx("img", {
             ref: ref,
             src: url,
@@ -48,13 +54,13 @@ const AssetPreview = /*#__PURE__*/ React__namespace.forwardRef(({ mime, url, nam
             ...props
         });
     }
-    if (mime.includes(constants.AssetType.Video)) {
+    if (assetType === enums.AssetType.Video) {
         return /*#__PURE__*/ jsxRuntime.jsx(MuxPlayer, {
             src: url,
             accentColor: theme.colors.primary500
         });
     }
-    if (mime.includes(constants.AssetType.Audio)) {
+    if (assetType === enums.AssetType.Audio) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
             margin: "5",
             children: /*#__PURE__*/ jsxRuntime.jsx("audio", {
@@ -66,34 +72,9 @@ const AssetPreview = /*#__PURE__*/ React__namespace.forwardRef(({ mime, url, nam
             })
         });
     }
-    if (mime.includes('pdf')) {
-        return /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
-            width: "100%",
-            justifyContent: "center",
-            ...props,
-            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                gap: 2,
-                direction: "column",
-                alignItems: "center",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(icons.FilePdf, {
-                        "aria-label": name,
-                        fill: "neutral500",
-                        width: 24,
-                        height: 24
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                        textColor: "neutral500",
-                        variant: "pi",
-                        children: formatMessage({
-                            id: 'noPreview',
-                            defaultMessage: 'No preview available'
-                        })
-                    })
-                ]
-            })
-        });
-    }
+    // getFileIconComponent will handle all other file types, eg. PDF, CSV, XLS, ZIP
+    // If the file type is not recognized, the default icon will be used
+    const IconComponent = icons.getFileIconComponent(assetType);
     return /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
         width: "100%",
         justifyContent: "center",
@@ -103,7 +84,7 @@ const AssetPreview = /*#__PURE__*/ React__namespace.forwardRef(({ mime, url, nam
             direction: "column",
             alignItems: "center",
             children: [
-                /*#__PURE__*/ jsxRuntime.jsx(icons.File, {
+                /*#__PURE__*/ jsxRuntime.jsx(IconComponent, {
                     "aria-label": name,
                     fill: "neutral500",
                     width: 24,

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

@@ -1 +1 @@
-{"version":3,"file":"AssetPreview.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport * as React from 'react';\n\nimport MuxPlayer from '@mux/mux-player-react';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\n\nconst CardAsset = styled(Flex)`\n  min-height: 26.4rem;\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface AssetPreviewProps {\n  mime: string;\n  name: string;\n  url: string;\n  onLoad?: () => void;\n}\n\nexport const AssetPreview = React.forwardRef<\n  HTMLImageElement | HTMLVideoElement | HTMLAudioElement,\n  AssetPreviewProps\n>(({ mime, url, name, ...props }, ref) => {\n  const theme = useTheme();\n\n  const { formatMessage } = useIntl();\n\n  if (mime.includes(AssetType.Image)) {\n    return (\n      <img ref={ref as React.ForwardedRef<HTMLImageElement>} src={url} alt={name} {...props} />\n    );\n  }\n\n  if (mime.includes(AssetType.Video)) {\n    return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;\n  }\n\n  if (mime.includes(AssetType.Audio)) {\n    return (\n      <Box margin=\"5\">\n        <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>\n          {name}\n        </audio>\n      </Box>\n    );\n  }\n\n  if (mime.includes('pdf')) {\n    return (\n      <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n        <Flex gap={2} direction=\"column\" alignItems=\"center\">\n          <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          <Typography textColor=\"neutral500\" variant=\"pi\">\n            {formatMessage({\n              id: 'noPreview',\n              defaultMessage: 'No preview available',\n            })}\n          </Typography>\n        </Flex>\n      </CardAsset>\n    );\n  }\n\n  return (\n    <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n      <Flex gap={2} direction=\"column\" alignItems=\"center\">\n        <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n\n        <Typography textColor=\"neutral500\" variant=\"pi\">\n          {formatMessage({\n            id: 'noPreview',\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </Flex>\n    </CardAsset>\n  );\n});\n\nAssetPreview.displayName = 'AssetPreview';\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","AssetPreview","React","forwardRef","mime","url","name","props","ref","useTheme","formatMessage","useIntl","includes","AssetType","Image","_jsx","img","src","alt","Video","MuxPlayer","accentColor","primary500","Audio","Box","margin","audio","controls","width","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","height","Typography","textColor","variant","id","defaultMessage","File","displayName"],"mappings":"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"}
+{"version":3,"file":"AssetPreview.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport * as React from 'react';\n\nimport MuxPlayer from '@mux/mux-player-react';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { typeFromMime } from '../../../utils';\nimport { getFileIconComponent } from '../../../utils/icons';\n\nconst CardAsset = styled(Flex)`\n  min-height: 26.4rem;\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface AssetPreviewProps {\n  mime: string;\n  name: string;\n  url: string;\n  onLoad?: () => void;\n}\n\nexport const AssetPreview = React.forwardRef<\n  HTMLImageElement | HTMLVideoElement | HTMLAudioElement,\n  AssetPreviewProps\n>(({ mime, url, name, ...props }, ref) => {\n  const theme = useTheme();\n\n  const assetType = typeFromMime(mime);\n\n  const { formatMessage } = useIntl();\n\n  if (assetType === AssetType.Image) {\n    return (\n      <img ref={ref as React.ForwardedRef<HTMLImageElement>} src={url} alt={name} {...props} />\n    );\n  }\n\n  if (assetType === AssetType.Video) {\n    return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;\n  }\n\n  if (assetType === AssetType.Audio) {\n    return (\n      <Box margin=\"5\">\n        <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>\n          {name}\n        </audio>\n      </Box>\n    );\n  }\n\n  // getFileIconComponent will handle all other file types, eg. PDF, CSV, XLS, ZIP\n  // If the file type is not recognized, the default icon will be used\n  const IconComponent = getFileIconComponent(assetType);\n  return (\n    <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n      <Flex gap={2} direction=\"column\" alignItems=\"center\">\n        <IconComponent aria-label={name} fill=\"neutral500\" width={24} height={24} />\n        <Typography textColor=\"neutral500\" variant=\"pi\">\n          {formatMessage({\n            id: 'noPreview',\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </Flex>\n    </CardAsset>\n  );\n});\n\nAssetPreview.displayName = 'AssetPreview';\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","AssetPreview","React","forwardRef","mime","url","name","props","ref","useTheme","assetType","typeFromMime","formatMessage","useIntl","AssetType","Image","_jsx","img","src","alt","Video","MuxPlayer","accentColor","primary500","Audio","Box","margin","audio","controls","IconComponent","getFileIconComponent","width","justifyContent","_jsxs","gap","direction","alignItems","aria-label","fill","height","Typography","textColor","variant","id","defaultMessage","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,SAAAA,GAAYC,uBAAOC,CAAAA,iBAAAA,CAAK;;AAEb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AASYC,MAAAA,YAAAA,iBAAeC,gBAAMC,CAAAA,UAAU,CAG1C,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AAChC,IAAA,MAAMZ,KAAQa,GAAAA,yBAAAA,EAAAA;AAEd,IAAA,MAAMC,YAAYC,yBAAaP,CAAAA,IAAAA,CAAAA;IAE/B,MAAM,EAAEQ,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,IAAIH,SAAAA,KAAcI,eAAUC,CAAAA,KAAK,EAAE;AACjC,QAAA,qBACEC,cAACC,CAAAA,KAAAA,EAAAA;YAAIT,GAAKA,EAAAA,GAAAA;YAA6CU,GAAKb,EAAAA,GAAAA;YAAKc,GAAKb,EAAAA,IAAAA;AAAO,YAAA,GAAGC;;AAEpF;IAEA,IAAIG,SAAAA,KAAcI,eAAUM,CAAAA,KAAK,EAAE;AACjC,QAAA,qBAAOJ,cAACK,CAAAA,SAAAA,EAAAA;YAAUH,GAAKb,EAAAA,GAAAA;YAAKiB,WAAa1B,EAAAA,KAAAA,CAAME,MAAM,CAACyB;;AACxD;IAEA,IAAIb,SAAAA,KAAcI,eAAUU,CAAAA,KAAK,EAAE;AACjC,QAAA,qBACER,cAACS,CAAAA,gBAAAA,EAAAA;YAAIC,MAAO,EAAA,GAAA;AACV,YAAA,QAAA,gBAAAV,cAACW,CAAAA,OAAAA,EAAAA;gBAAMC,QAAQ,EAAA,IAAA;gBAACV,GAAKb,EAAAA,GAAAA;gBAAKG,GAAKA,EAAAA,GAAAA;AAA8C,gBAAA,GAAGD,KAAK;AAClFD,gBAAAA,QAAAA,EAAAA;;;AAIT;;;AAIA,IAAA,MAAMuB,gBAAgBC,0BAAqBpB,CAAAA,SAAAA,CAAAA;AAC3C,IAAA,qBACEM,cAACvB,CAAAA,SAAAA,EAAAA;QAAUsC,KAAM,EAAA,MAAA;QAAOC,cAAe,EAAA,QAAA;AAAU,QAAA,GAAGzB,KAAK;AACvD,QAAA,QAAA,gBAAA0B,eAACtC,CAAAA,iBAAAA,EAAAA;YAAKuC,GAAK,EAAA,CAAA;YAAGC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,QAAA;;8BAC1CpB,cAACa,CAAAA,aAAAA,EAAAA;oBAAcQ,YAAY/B,EAAAA,IAAAA;oBAAMgC,IAAK,EAAA,YAAA;oBAAaP,KAAO,EAAA,EAAA;oBAAIQ,MAAQ,EAAA;;8BACtEvB,cAACwB,CAAAA,uBAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,OAAQ,EAAA,IAAA;8BACxC9B,aAAc,CAAA;wBACb+B,EAAI,EAAA,WAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV,CAAG;AAEH3C,YAAAA,CAAa4C,WAAW,GAAG,cAAA;;;;"}

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

@@ -2,10 +2,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import MuxPlayer from '@mux/mux-player-react';
 import { Flex, Box, Typography } from '@strapi/design-system';
-import { FilePdf, File } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled, useTheme } from 'styled-components';
-import { AssetType } from '../../../constants.mjs';
+import { AssetType } from '../../../enums.mjs';
+import 'byte-size';
+import 'date-fns';
+import 'qs';
+import { typeFromMime } from '../../../utils/typeFromMime.mjs';
+import '../../../utils/urlYupSchema.mjs';
+import { getFileIconComponent } from '../../../utils/icons.mjs';
 
 const CardAsset = styled(Flex)`
   min-height: 26.4rem;
@@ -18,8 +23,9 @@ const CardAsset = styled(Flex)`
 `;
 const AssetPreview = /*#__PURE__*/ React.forwardRef(({ mime, url, name, ...props }, ref)=>{
     const theme = useTheme();
+    const assetType = typeFromMime(mime);
     const { formatMessage } = useIntl();
-    if (mime.includes(AssetType.Image)) {
+    if (assetType === AssetType.Image) {
         return /*#__PURE__*/ jsx("img", {
             ref: ref,
             src: url,
@@ -27,13 +33,13 @@ const AssetPreview = /*#__PURE__*/ React.forwardRef(({ mime, url, name, ...props
             ...props
         });
     }
-    if (mime.includes(AssetType.Video)) {
+    if (assetType === AssetType.Video) {
         return /*#__PURE__*/ jsx(MuxPlayer, {
             src: url,
             accentColor: theme.colors.primary500
         });
     }
-    if (mime.includes(AssetType.Audio)) {
+    if (assetType === AssetType.Audio) {
         return /*#__PURE__*/ jsx(Box, {
             margin: "5",
             children: /*#__PURE__*/ jsx("audio", {
@@ -45,34 +51,9 @@ const AssetPreview = /*#__PURE__*/ React.forwardRef(({ mime, url, name, ...props
             })
         });
     }
-    if (mime.includes('pdf')) {
-        return /*#__PURE__*/ jsx(CardAsset, {
-            width: "100%",
-            justifyContent: "center",
-            ...props,
-            children: /*#__PURE__*/ jsxs(Flex, {
-                gap: 2,
-                direction: "column",
-                alignItems: "center",
-                children: [
-                    /*#__PURE__*/ jsx(FilePdf, {
-                        "aria-label": name,
-                        fill: "neutral500",
-                        width: 24,
-                        height: 24
-                    }),
-                    /*#__PURE__*/ jsx(Typography, {
-                        textColor: "neutral500",
-                        variant: "pi",
-                        children: formatMessage({
-                            id: 'noPreview',
-                            defaultMessage: 'No preview available'
-                        })
-                    })
-                ]
-            })
-        });
-    }
+    // getFileIconComponent will handle all other file types, eg. PDF, CSV, XLS, ZIP
+    // If the file type is not recognized, the default icon will be used
+    const IconComponent = getFileIconComponent(assetType);
     return /*#__PURE__*/ jsx(CardAsset, {
         width: "100%",
         justifyContent: "center",
@@ -82,7 +63,7 @@ const AssetPreview = /*#__PURE__*/ React.forwardRef(({ mime, url, name, ...props
             direction: "column",
             alignItems: "center",
             children: [
-                /*#__PURE__*/ jsx(File, {
+                /*#__PURE__*/ jsx(IconComponent, {
                     "aria-label": name,
                     fill: "neutral500",
                     width: 24,

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

@@ -1 +1 @@
-{"version":3,"file":"AssetPreview.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport * as React from 'react';\n\nimport MuxPlayer from '@mux/mux-player-react';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\n\nconst CardAsset = styled(Flex)`\n  min-height: 26.4rem;\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface AssetPreviewProps {\n  mime: string;\n  name: string;\n  url: string;\n  onLoad?: () => void;\n}\n\nexport const AssetPreview = React.forwardRef<\n  HTMLImageElement | HTMLVideoElement | HTMLAudioElement,\n  AssetPreviewProps\n>(({ mime, url, name, ...props }, ref) => {\n  const theme = useTheme();\n\n  const { formatMessage } = useIntl();\n\n  if (mime.includes(AssetType.Image)) {\n    return (\n      <img ref={ref as React.ForwardedRef<HTMLImageElement>} src={url} alt={name} {...props} />\n    );\n  }\n\n  if (mime.includes(AssetType.Video)) {\n    return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;\n  }\n\n  if (mime.includes(AssetType.Audio)) {\n    return (\n      <Box margin=\"5\">\n        <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>\n          {name}\n        </audio>\n      </Box>\n    );\n  }\n\n  if (mime.includes('pdf')) {\n    return (\n      <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n        <Flex gap={2} direction=\"column\" alignItems=\"center\">\n          <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          <Typography textColor=\"neutral500\" variant=\"pi\">\n            {formatMessage({\n              id: 'noPreview',\n              defaultMessage: 'No preview available',\n            })}\n          </Typography>\n        </Flex>\n      </CardAsset>\n    );\n  }\n\n  return (\n    <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n      <Flex gap={2} direction=\"column\" alignItems=\"center\">\n        <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n\n        <Typography textColor=\"neutral500\" variant=\"pi\">\n          {formatMessage({\n            id: 'noPreview',\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </Flex>\n    </CardAsset>\n  );\n});\n\nAssetPreview.displayName = 'AssetPreview';\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","AssetPreview","React","forwardRef","mime","url","name","props","ref","useTheme","formatMessage","useIntl","includes","AssetType","Image","_jsx","img","src","alt","Video","MuxPlayer","accentColor","primary500","Audio","Box","margin","audio","controls","width","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","height","Typography","textColor","variant","id","defaultMessage","File","displayName"],"mappings":";;;;;;;;;AAWA,MAAMA,SAAAA,GAAYC,MAAOC,CAAAA,IAAAA,CAAK;;AAEb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AASYC,MAAAA,YAAAA,iBAAeC,KAAMC,CAAAA,UAAU,CAG1C,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AAChC,IAAA,MAAMZ,KAAQa,GAAAA,QAAAA,EAAAA;IAEd,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,IAAIP,IAAKQ,CAAAA,QAAQ,CAACC,SAAAA,CAAUC,KAAK,CAAG,EAAA;AAClC,QAAA,qBACEC,GAACC,CAAAA,KAAAA,EAAAA;YAAIR,GAAKA,EAAAA,GAAAA;YAA6CS,GAAKZ,EAAAA,GAAAA;YAAKa,GAAKZ,EAAAA,IAAAA;AAAO,YAAA,GAAGC;;AAEpF;AAEA,IAAA,IAAIH,IAAKQ,CAAAA,QAAQ,CAACC,SAAAA,CAAUM,KAAK,CAAG,EAAA;AAClC,QAAA,qBAAOJ,GAACK,CAAAA,SAAAA,EAAAA;YAAUH,GAAKZ,EAAAA,GAAAA;YAAKgB,WAAazB,EAAAA,KAAAA,CAAME,MAAM,CAACwB;;AACxD;AAEA,IAAA,IAAIlB,IAAKQ,CAAAA,QAAQ,CAACC,SAAAA,CAAUU,KAAK,CAAG,EAAA;AAClC,QAAA,qBACER,GAACS,CAAAA,GAAAA,EAAAA;YAAIC,MAAO,EAAA,GAAA;AACV,YAAA,QAAA,gBAAAV,GAACW,CAAAA,OAAAA,EAAAA;gBAAMC,QAAQ,EAAA,IAAA;gBAACV,GAAKZ,EAAAA,GAAAA;gBAAKG,GAAKA,EAAAA,GAAAA;AAA8C,gBAAA,GAAGD,KAAK;AAClFD,gBAAAA,QAAAA,EAAAA;;;AAIT;IAEA,IAAIF,IAAAA,CAAKQ,QAAQ,CAAC,KAAQ,CAAA,EAAA;AACxB,QAAA,qBACEG,GAACtB,CAAAA,SAAAA,EAAAA;YAAUmC,KAAM,EAAA,MAAA;YAAOC,cAAe,EAAA,QAAA;AAAU,YAAA,GAAGtB,KAAK;AACvD,YAAA,QAAA,gBAAAuB,IAACnC,CAAAA,IAAAA,EAAAA;gBAAKoC,GAAK,EAAA,CAAA;gBAAGC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,QAAA;;kCAC1ClB,GAACmB,CAAAA,OAAAA,EAAAA;wBAAQC,YAAY7B,EAAAA,IAAAA;wBAAM8B,IAAK,EAAA,YAAA;wBAAaR,KAAO,EAAA,EAAA;wBAAIS,MAAQ,EAAA;;kCAChEtB,GAACuB,CAAAA,UAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;wBAAaC,OAAQ,EAAA,IAAA;kCACxC9B,aAAc,CAAA;4BACb+B,EAAI,EAAA,WAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;;;AAKV;AAEA,IAAA,qBACE3B,GAACtB,CAAAA,SAAAA,EAAAA;QAAUmC,KAAM,EAAA,MAAA;QAAOC,cAAe,EAAA,QAAA;AAAU,QAAA,GAAGtB,KAAK;AACvD,QAAA,QAAA,gBAAAuB,IAACnC,CAAAA,IAAAA,EAAAA;YAAKoC,GAAK,EAAA,CAAA;YAAGC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,QAAA;;8BAC1ClB,GAAC4B,CAAAA,IAAAA,EAAAA;oBAAKR,YAAY7B,EAAAA,IAAAA;oBAAM8B,IAAK,EAAA,YAAA;oBAAaR,KAAO,EAAA,EAAA;oBAAIS,MAAQ,EAAA;;8BAE7DtB,GAACuB,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,OAAQ,EAAA,IAAA;8BACxC9B,aAAc,CAAA;wBACb+B,EAAI,EAAA,WAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV,CAAG;AAEHzC,YAAAA,CAAa2C,WAAW,GAAG,cAAA;;;;"}
+{"version":3,"file":"AssetPreview.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport * as React from 'react';\n\nimport MuxPlayer from '@mux/mux-player-react';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { typeFromMime } from '../../../utils';\nimport { getFileIconComponent } from '../../../utils/icons';\n\nconst CardAsset = styled(Flex)`\n  min-height: 26.4rem;\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface AssetPreviewProps {\n  mime: string;\n  name: string;\n  url: string;\n  onLoad?: () => void;\n}\n\nexport const AssetPreview = React.forwardRef<\n  HTMLImageElement | HTMLVideoElement | HTMLAudioElement,\n  AssetPreviewProps\n>(({ mime, url, name, ...props }, ref) => {\n  const theme = useTheme();\n\n  const assetType = typeFromMime(mime);\n\n  const { formatMessage } = useIntl();\n\n  if (assetType === AssetType.Image) {\n    return (\n      <img ref={ref as React.ForwardedRef<HTMLImageElement>} src={url} alt={name} {...props} />\n    );\n  }\n\n  if (assetType === AssetType.Video) {\n    return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;\n  }\n\n  if (assetType === AssetType.Audio) {\n    return (\n      <Box margin=\"5\">\n        <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>\n          {name}\n        </audio>\n      </Box>\n    );\n  }\n\n  // getFileIconComponent will handle all other file types, eg. PDF, CSV, XLS, ZIP\n  // If the file type is not recognized, the default icon will be used\n  const IconComponent = getFileIconComponent(assetType);\n  return (\n    <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n      <Flex gap={2} direction=\"column\" alignItems=\"center\">\n        <IconComponent aria-label={name} fill=\"neutral500\" width={24} height={24} />\n        <Typography textColor=\"neutral500\" variant=\"pi\">\n          {formatMessage({\n            id: 'noPreview',\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </Flex>\n    </CardAsset>\n  );\n});\n\nAssetPreview.displayName = 'AssetPreview';\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","AssetPreview","React","forwardRef","mime","url","name","props","ref","useTheme","assetType","typeFromMime","formatMessage","useIntl","AssetType","Image","_jsx","img","src","alt","Video","MuxPlayer","accentColor","primary500","Audio","Box","margin","audio","controls","IconComponent","getFileIconComponent","width","justifyContent","_jsxs","gap","direction","alignItems","aria-label","fill","height","Typography","textColor","variant","id","defaultMessage","displayName"],"mappings":";;;;;;;;;;;;;;AAYA,MAAMA,SAAAA,GAAYC,MAAOC,CAAAA,IAAAA,CAAK;;AAEb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AASYC,MAAAA,YAAAA,iBAAeC,KAAMC,CAAAA,UAAU,CAG1C,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AAChC,IAAA,MAAMZ,KAAQa,GAAAA,QAAAA,EAAAA;AAEd,IAAA,MAAMC,YAAYC,YAAaP,CAAAA,IAAAA,CAAAA;IAE/B,MAAM,EAAEQ,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,IAAIH,SAAAA,KAAcI,SAAUC,CAAAA,KAAK,EAAE;AACjC,QAAA,qBACEC,GAACC,CAAAA,KAAAA,EAAAA;YAAIT,GAAKA,EAAAA,GAAAA;YAA6CU,GAAKb,EAAAA,GAAAA;YAAKc,GAAKb,EAAAA,IAAAA;AAAO,YAAA,GAAGC;;AAEpF;IAEA,IAAIG,SAAAA,KAAcI,SAAUM,CAAAA,KAAK,EAAE;AACjC,QAAA,qBAAOJ,GAACK,CAAAA,SAAAA,EAAAA;YAAUH,GAAKb,EAAAA,GAAAA;YAAKiB,WAAa1B,EAAAA,KAAAA,CAAME,MAAM,CAACyB;;AACxD;IAEA,IAAIb,SAAAA,KAAcI,SAAUU,CAAAA,KAAK,EAAE;AACjC,QAAA,qBACER,GAACS,CAAAA,GAAAA,EAAAA;YAAIC,MAAO,EAAA,GAAA;AACV,YAAA,QAAA,gBAAAV,GAACW,CAAAA,OAAAA,EAAAA;gBAAMC,QAAQ,EAAA,IAAA;gBAACV,GAAKb,EAAAA,GAAAA;gBAAKG,GAAKA,EAAAA,GAAAA;AAA8C,gBAAA,GAAGD,KAAK;AAClFD,gBAAAA,QAAAA,EAAAA;;;AAIT;;;AAIA,IAAA,MAAMuB,gBAAgBC,oBAAqBpB,CAAAA,SAAAA,CAAAA;AAC3C,IAAA,qBACEM,GAACvB,CAAAA,SAAAA,EAAAA;QAAUsC,KAAM,EAAA,MAAA;QAAOC,cAAe,EAAA,QAAA;AAAU,QAAA,GAAGzB,KAAK;AACvD,QAAA,QAAA,gBAAA0B,IAACtC,CAAAA,IAAAA,EAAAA;YAAKuC,GAAK,EAAA,CAAA;YAAGC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,QAAA;;8BAC1CpB,GAACa,CAAAA,aAAAA,EAAAA;oBAAcQ,YAAY/B,EAAAA,IAAAA;oBAAMgC,IAAK,EAAA,YAAA;oBAAaP,KAAO,EAAA,EAAA;oBAAIQ,MAAQ,EAAA;;8BACtEvB,GAACwB,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,OAAQ,EAAA,IAAA;8BACxC9B,aAAc,CAAA;wBACb+B,EAAI,EAAA,WAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV,CAAG;AAEH3C,YAAAA,CAAa4C,WAAW,GAAG,cAAA;;;;"}

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

@@ -9,7 +9,7 @@ require('byte-size');
 require('date-fns');
 var getTrad = require('../../../utils/getTrad.js');
 require('qs');
-require('../../../constants.js');
+require('../../../utils/typeFromMime.js');
 require('../../../utils/urlYupSchema.js');
 var PreviewComponents = require('./PreviewComponents.js');
 

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

@@ -7,7 +7,7 @@ import 'byte-size';
 import 'date-fns';
 import { getTrad } from '../../../utils/getTrad.mjs';
 import 'qs';
-import '../../../constants.mjs';
+import '../../../utils/typeFromMime.mjs';
 import '../../../utils/urlYupSchema.mjs';
 import { CroppingActionRow } from './PreviewComponents.mjs';
 

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

@@ -2,15 +2,15 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var cropperjscss = require('cropperjs/dist/cropper.css?raw');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
-var constants = require('../../../constants.js');
+var enums = require('../../../enums.js');
 var useCropImg = require('../../../hooks/useCropImg.js');
 var useEditAsset = require('../../../hooks/useEditAsset.js');
+var useTracking = require('../../../hooks/useTracking.js');
 var useUpload = require('../../../hooks/useUpload.js');
 var createAssetUrl = require('../../../utils/createAssetUrl.js');
 var downloadFile = require('../../../utils/downloadFile.js');
@@ -18,6 +18,7 @@ require('byte-size');
 require('date-fns');
 var getTrad = require('../../../utils/getTrad.js');
 require('qs');
+require('../../../utils/typeFromMime.js');
 require('../../../utils/urlYupSchema.js');
 var CopyLinkButton = require('../../CopyLinkButton/CopyLinkButton.js');
 var UploadProgress = require('../../UploadProgress/UploadProgress.js');
@@ -48,7 +49,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 // TODO: find a better naming convention for the file that was an index file before
 const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCropFinish, onCropStart, onCropCancel, replacementFile, trackedLocation })=>{
     const CropperjsStyle = styledComponents.createGlobalStyle`${cropperjscss}`;
-    const { trackUsage } = strapiAdmin.useTracking();
+    const { trackUsage } = useTracking.useTracking();
     const previewRef = React__namespace.useRef(null);
     const [isCropImageReady, setIsCropImageReady] = React__namespace.useState(false);
     const [hasCropIntent, setHasCropIntent] = React__namespace.useState(null);
@@ -194,7 +195,7 @@ const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCr
                                 canCopyLink && /*#__PURE__*/ jsxRuntime.jsx(CopyLinkButton.CopyLinkButton, {
                                     url: assetUrl
                                 }),
-                                canUpdate && asset.mime?.includes(constants.AssetType.Image) && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                canUpdate && asset.mime?.includes(enums.AssetType.Image) && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
                                     label: formatMessage({
                                         id: getTrad.getTrad('control-card.crop'),
                                         defaultMessage: 'Crop'

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewBox.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\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 '../../../constants';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\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.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash } 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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"}

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

@@ -1,14 +1,14 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useTracking } from '@strapi/admin/strapi-admin';
 import { Flex, IconButton } from '@strapi/design-system';
 import { Trash, Download, Crop } from '@strapi/icons';
 import cropperjscss from 'cropperjs/dist/cropper.css?raw';
 import { useIntl } from 'react-intl';
 import { createGlobalStyle } from 'styled-components';
-import { AssetType } from '../../../constants.mjs';
+import { AssetType } from '../../../enums.mjs';
 import { useCropImg } from '../../../hooks/useCropImg.mjs';
 import { useEditAsset } from '../../../hooks/useEditAsset.mjs';
+import { useTracking } from '../../../hooks/useTracking.mjs';
 import { useUpload } from '../../../hooks/useUpload.mjs';
 import { createAssetUrl } from '../../../utils/createAssetUrl.mjs';
 import { downloadFile } from '../../../utils/downloadFile.mjs';
@@ -16,6 +16,7 @@ import 'byte-size';
 import 'date-fns';
 import { getTrad } from '../../../utils/getTrad.mjs';
 import 'qs';
+import '../../../utils/typeFromMime.mjs';
 import '../../../utils/urlYupSchema.mjs';
 import { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton.mjs';
 import { UploadProgress } from '../../UploadProgress/UploadProgress.mjs';