diff --git a/packages/core/helper-plugin/lib/src/index.js b/packages/core/helper-plugin/lib/src/index.js index ed98cb21bd..092bc39c95 100644 --- a/packages/core/helper-plugin/lib/src/index.js +++ b/packages/core/helper-plugin/lib/src/index.js @@ -145,7 +145,7 @@ export { default as hasPermissions } from './old/utils/hasPermissions'; export { findMatchingPermissions } from './old/utils/hasPermissions'; export { default as translatedErrors } from './old/utils/translatedErrors'; export { darken } from './old/utils/colors'; -export { default as getFileExtension } from './old/utils/getFileExtension'; +export { default as getFileExtension } from './utils/getFileExtension/getFileExtension'; export { default as getFilterType } from './old/utils/getFilterType'; export { default as getQueryParameters } from './old/utils/getQueryParameters'; export { default as validateInput } from './old/utils/inputsValidations'; @@ -158,7 +158,7 @@ export { default as getYupInnerErrors } from './old/utils/getYupInnerErrors'; export { default as generateFiltersFromSearch } from './old/utils/generateFiltersFromSearch'; export { default as generateSearchFromFilters } from './old/utils/generateSearchFromFilters'; export { default as generateSearchFromObject } from './old/utils/generateSearchFromObject'; -export { default as prefixFileUrlWithBackendUrl } from './old/utils/prefixFileUrlWithBackendUrl'; +export { default as prefixFileUrlWithBackendUrl } from './utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl'; export { default as prefixPluginTranslations } from './old/utils/prefixPluginTranslations'; export { default as pxToRem } from './utils/pxToRem'; diff --git a/packages/core/helper-plugin/lib/src/old/utils/getFileExtension.js b/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js similarity index 100% rename from packages/core/helper-plugin/lib/src/old/utils/getFileExtension.js rename to packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js diff --git a/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.stories.mdx b/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.stories.mdx new file mode 100644 index 0000000000..08ce7b8a4c --- /dev/null +++ b/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.stories.mdx @@ -0,0 +1,21 @@ + + +import { Meta } from '@storybook/addon-docs'; + + + +# getFileExtension + +This hook is used to create URL aware of the backend. Practical to resolve assets. + +## Usage + +``` +import { getFileExtension } from '@strapi/helper-plugin'; + +const Compo = () => { + const ext = getFileExtension('.png') + + return
{ext}
; +} +``` diff --git a/packages/core/helper-plugin/lib/src/old/utils/tests/getFileExtension.test.js b/packages/core/helper-plugin/lib/src/utils/getFileExtension/tests/getFileExtension.test.js similarity index 100% rename from packages/core/helper-plugin/lib/src/old/utils/tests/getFileExtension.test.js rename to packages/core/helper-plugin/lib/src/utils/getFileExtension/tests/getFileExtension.test.js diff --git a/packages/core/helper-plugin/lib/src/old/utils/prefixFileUrlWithBackendUrl.js b/packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.js similarity index 100% rename from packages/core/helper-plugin/lib/src/old/utils/prefixFileUrlWithBackendUrl.js rename to packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.js diff --git a/packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.stories.mdx b/packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.stories.mdx new file mode 100644 index 0000000000..f8a033147c --- /dev/null +++ b/packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.stories.mdx @@ -0,0 +1,21 @@ + + +import { Meta } from '@storybook/addon-docs'; + + + +# prefixFileUrlWithBackendUrl + +This hook is used to create URL aware of the backend. Practical to resolve assets. + +## Usage + +``` +import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin'; + +const Compo = () => { + const url = prefixFileUrlWithBackendUrl('/somewhere-i-belong') + + return
{url}
; +} +``` diff --git a/packages/core/helper-plugin/lib/src/old/utils/tests/prefixFileUrlWithBackendUrl.test.js b/packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/tests/prefixFileUrlWithBackendUrl.test.js similarity index 100% rename from packages/core/helper-plugin/lib/src/old/utils/tests/prefixFileUrlWithBackendUrl.test.js rename to packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/tests/prefixFileUrlWithBackendUrl.test.js diff --git a/packages/core/upload/admin/src/pages/App/components/DocAssetCard.js b/packages/core/upload/admin/src/pages/App/components/DocAssetCard.js index 81a2d702f0..13457ec080 100644 --- a/packages/core/upload/admin/src/pages/App/components/DocAssetCard.js +++ b/packages/core/upload/admin/src/pages/App/components/DocAssetCard.js @@ -52,7 +52,7 @@ export const DocAssetCard = ({ name, extension }) => { {name} - {extension.replace('.', '')} + {extension} diff --git a/packages/core/upload/admin/src/pages/App/components/ImageAssetCard.js b/packages/core/upload/admin/src/pages/App/components/ImageAssetCard.js index c61c592a0b..d983088a98 100644 --- a/packages/core/upload/admin/src/pages/App/components/ImageAssetCard.js +++ b/packages/core/upload/admin/src/pages/App/components/ImageAssetCard.js @@ -35,13 +35,13 @@ export const ImageAssetCard = ({ name, extension, height, width, thumbnail }) => icon={} /> - + {name} - {extension.replace('.', '')} - {height}✕{width} + {extension} - {height}✕{width} diff --git a/packages/core/upload/admin/src/pages/App/components/ListView.js b/packages/core/upload/admin/src/pages/App/components/ListView.js index 1550c21f06..dceb11d645 100644 --- a/packages/core/upload/admin/src/pages/App/components/ListView.js +++ b/packages/core/upload/admin/src/pages/App/components/ListView.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { GridLayout } from '@strapi/parts/Layout'; import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable'; +import { prefixFileUrlWithBackendUrl, getFileExtension } from '@strapi/helper-plugin'; import { ImageAssetCard } from './ImageAssetCard'; import { VideoAssetCard } from './VideoAssetCard'; import { DocAssetCard } from './DocAssetCard'; @@ -17,8 +18,8 @@ export const ListView = ({ assets }) => { id={asset.id} key={asset.id} name={asset.name} - extension={asset.ext} - url={asset.url} + extension={getFileExtension(asset.ext)} + url={prefixFileUrlWithBackendUrl(asset.url)} mime={asset.mime} /> ); @@ -30,16 +31,21 @@ export const ListView = ({ assets }) => { id={asset.id} key={asset.id} name={asset.name} - extension={asset.ext} + extension={getFileExtension(asset.ext)} height={asset.height} width={asset.width} - thumbnail={asset?.formats?.thumbnail?.url || asset.url} + thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)} /> ); } return ( - + ); })} diff --git a/packages/core/upload/admin/src/pages/App/components/VideoAssetCard.js b/packages/core/upload/admin/src/pages/App/components/VideoAssetCard.js index fb41e24b67..1dddd425cd 100644 --- a/packages/core/upload/admin/src/pages/App/components/VideoAssetCard.js +++ b/packages/core/upload/admin/src/pages/App/components/VideoAssetCard.js @@ -48,7 +48,7 @@ export const VideoAssetCard = ({ name, extension, url, mime }) => { {name} - {extension.replace('.', '')} + {extension} diff --git a/packages/core/upload/admin/src/pages/App/components/VideoPreview.js b/packages/core/upload/admin/src/pages/App/components/VideoPreview.js index f5474c8bda..1b6e378faf 100644 --- a/packages/core/upload/admin/src/pages/App/components/VideoPreview.js +++ b/packages/core/upload/admin/src/pages/App/components/VideoPreview.js @@ -31,11 +31,7 @@ export const VideoPreview = ({ url, mime, onLoadDuration }) => { return ( {!loaded && ( -