diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js index fb2b29388b..ce500cc4a0 100644 --- a/packages/strapi-helper-plugin/lib/src/index.js +++ b/packages/strapi-helper-plugin/lib/src/index.js @@ -110,6 +110,7 @@ export { default as getYupInnerErrors } from './utils/getYupInnerErrors'; export { default as generateFiltersFromSearch } from './utils/generateFiltersFromSearch'; export { default as generateSearchFromFilters } from './utils/generateSearchFromFilters'; export { default as generateSearchFromObject } from './utils/generateSearchFromObject'; +export { default as prefixFileUrlWithBackendUrl } from './utils/prefixFileUrlWithBackendUrl'; // SVGS export { default as LayoutIcon } from './svgs/Layout'; diff --git a/packages/strapi-plugin-upload/admin/src/utils/prefixFileUrlWithBackendUrl.js b/packages/strapi-helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl.js similarity index 51% rename from packages/strapi-plugin-upload/admin/src/utils/prefixFileUrlWithBackendUrl.js rename to packages/strapi-helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl.js index b4f937e64d..1bdf336dcb 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/prefixFileUrlWithBackendUrl.js +++ b/packages/strapi-helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl.js @@ -1,5 +1,5 @@ const prefixFileUrlWithBackendUrl = fileURL => { - return fileURL.startsWith('/') ? `${strapi.backendURL}${fileURL}` : fileURL; + return !!fileURL && fileURL.startsWith('/') ? `${strapi.backendURL}${fileURL}` : fileURL; }; export default prefixFileUrlWithBackendUrl; diff --git a/packages/strapi-plugin-upload/admin/src/utils/tests/prefixFileUrlWithBackendUrl.test.js b/packages/strapi-helper-plugin/lib/src/utils/tests/prefixFileUrlWithBackendUrl.test.js similarity index 68% rename from packages/strapi-plugin-upload/admin/src/utils/tests/prefixFileUrlWithBackendUrl.test.js rename to packages/strapi-helper-plugin/lib/src/utils/tests/prefixFileUrlWithBackendUrl.test.js index 9adc6ce461..916a276c73 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/tests/prefixFileUrlWithBackendUrl.test.js +++ b/packages/strapi-helper-plugin/lib/src/utils/tests/prefixFileUrlWithBackendUrl.test.js @@ -1,6 +1,6 @@ import prefixFileUrlWithBackendUrl from '../prefixFileUrlWithBackendUrl'; -describe('UPLOAD | utils | prefixFileUrlWithBackendUrl', () => { +describe('HELPER_PLUGIN | utils | prefixFileUrlWithBackendUrl', () => { it("should add the strapi back-end url if the file's url startsWith '/'", () => { const data = '/upload/test'; const expected = 'http://localhost:1337/upload/test'; @@ -14,4 +14,11 @@ describe('UPLOAD | utils | prefixFileUrlWithBackendUrl', () => { expect(prefixFileUrlWithBackendUrl(data)).toEqual(expected); }); + + it('should return the data if the url is not a string', () => { + const data = null; + const expected = null; + + expect(prefixFileUrlWithBackendUrl(data)).toEqual(expected); + }); }); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js index 83de1d3f2d..6d6d0bbb60 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { isArray, includes, isEmpty } from 'lodash'; +import { get, isArray, includes, isEmpty } from 'lodash'; +import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin'; import DefaultIcon from '../../icons/Na'; import { StyledMediaPreviewList, @@ -13,12 +14,11 @@ import { const IMAGE_PREVIEW_COUNT = 3; function MediaPreviewList({ hoverable, files }) { - const getFileType = fileName => fileName.split('.').slice(-1)[0]; - const getSrc = fileURL => - fileURL.startsWith('/') ? `${strapi.backendURL}${fileURL}` : fileURL; + const getFileType = fileName => (fileName ? fileName.split('.').slice(-1)[0] : null); const renderImage = image => { const { name, size, url } = image; + const fileUrl = get(image, ['formats', 'thumbnail', 'url'], url); if (size > 2000) { return renderFile(image); @@ -27,9 +27,9 @@ function MediaPreviewList({ hoverable, files }) { return (
- {`${name}`} + {`${name}`}
- {`${name}`} + {`${name}`} ); }; @@ -40,10 +40,16 @@ function MediaPreviewList({ hoverable, files }) { return ( -
- {fileType} - -
+ {fileType ? ( +
+ {fileType} +
+ ) : ( + + + + )} + {name} ); @@ -73,8 +79,7 @@ function MediaPreviewList({ hoverable, files }) { return files.map((file, index) => { return ( - {index === IMAGE_PREVIEW_COUNT && - files.length > IMAGE_PREVIEW_COUNT + 1 + {index === IMAGE_PREVIEW_COUNT && files.length > IMAGE_PREVIEW_COUNT + 1 ? renderText(files.length - IMAGE_PREVIEW_COUNT) : renderItem(file)} diff --git a/packages/strapi-plugin-upload/admin/src/components/Card/index.js b/packages/strapi-plugin-upload/admin/src/components/Card/index.js index 4c338fa496..fb78f6264a 100644 --- a/packages/strapi-plugin-upload/admin/src/components/Card/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/Card/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import PropTypes from 'prop-types'; import { formatBytes, getExtension, getType } from '../../utils'; @@ -98,4 +98,4 @@ Card.propTypes = { withFileCaching: PropTypes.bool, }; -export default Card; +export default memo(Card); diff --git a/packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js b/packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js index d86d85ea60..3f08e18066 100644 --- a/packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo, useRef } from 'react'; import PropTypes from 'prop-types'; import { getExtension, getType } from '../../utils'; @@ -12,6 +12,7 @@ import Image from './Image'; const CardPreview = ({ hasError, hasIcon, url, previewUrl, type, withFileCaching }) => { const isFile = getType(type) === 'file'; const isVideo = getType(type) === 'video'; + const cacheRef = useRef(performance.now()); if (hasError) { return ( @@ -36,7 +37,7 @@ const CardPreview = ({ hasError, hasIcon, url, previewUrl, type, withFileCaching ) : ( // Adding performance.now forces the browser no to cache the img // https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images - + )} ); @@ -60,4 +61,4 @@ CardPreview.propTypes = { withFileCaching: PropTypes.bool, }; -export default CardPreview; +export default memo(CardPreview); diff --git a/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js b/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js index 90a83e717a..37addc5c7e 100644 --- a/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js @@ -13,10 +13,10 @@ import axios from 'axios'; import { get } from 'lodash'; import PropTypes from 'prop-types'; import { Inputs } from '@buffetjs/custom'; -import { useGlobalContext } from 'strapi-helper-plugin'; +import { useGlobalContext, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin'; import Cropper from 'cropperjs'; import 'cropperjs/dist/cropper.css'; -import { createFileToDownloadName, getTrad, prefixFileUrlWithBackendUrl } from '../../utils'; +import { createFileToDownloadName, getTrad } from '../../utils'; import CardControl from '../CardControl'; import CardControlsWrapper from '../CardControlsWrapper'; import CardPreview from '../CardPreview'; diff --git a/packages/strapi-plugin-upload/admin/src/components/InputMedia/InputFilePreview.js b/packages/strapi-plugin-upload/admin/src/components/InputMedia/InputFilePreview.js index 9871a79489..68baea418f 100644 --- a/packages/strapi-plugin-upload/admin/src/components/InputMedia/InputFilePreview.js +++ b/packages/strapi-plugin-upload/admin/src/components/InputMedia/InputFilePreview.js @@ -1,12 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin'; import CardPreview from '../CardPreview'; import Flex from '../Flex'; import Chevron from './Chevron'; const InputFilePreview = ({ file, onClick, isSlider }) => { - const fileUrl = file.url.startsWith('/') ? `${strapi.backendURL}${file.url}` : file.url; + const fileUrl = prefixFileUrlWithBackendUrl(file.url); return ( file.id === id) !== -1; - const fileUrl = url.startsWith('/') ? `${strapi.backendURL}${url}` : url; + const fileUrl = prefixFileUrlWithBackendUrl(url); return ( -
+
mime.split(/[\s/]+/)[1]; +const getExtension = mime => (mime ? mime.split(/[\s/]+/)[1] : 'undefined'); export default getExtension; diff --git a/packages/strapi-plugin-upload/admin/src/utils/getType.js b/packages/strapi-plugin-upload/admin/src/utils/getType.js index e15571e13b..a89acc8dc0 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/getType.js +++ b/packages/strapi-plugin-upload/admin/src/utils/getType.js @@ -1,4 +1,8 @@ const getType = mime => { + if (!mime) { + return 'file'; + } + const type = mime.split(/[\s/]+/)[0]; if (type === 'image' || type === 'video') { diff --git a/packages/strapi-plugin-upload/admin/src/utils/index.js b/packages/strapi-plugin-upload/admin/src/utils/index.js index a6d7827cb2..33ac53eca3 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/index.js +++ b/packages/strapi-plugin-upload/admin/src/utils/index.js @@ -11,4 +11,3 @@ export { default as getRequestUrl } from './getRequestUrl'; export { default as getTrad } from './getTrad'; export { default as getType } from './getType'; export { default as ItemTypes } from './ItemTypes'; -export { default as prefixFileUrlWithBackendUrl } from './prefixFileUrlWithBackendUrl'; diff --git a/packages/strapi-plugin-upload/admin/src/utils/tests/formatBytes.test.js b/packages/strapi-plugin-upload/admin/src/utils/tests/formatBytes.test.js index 65fa157191..29c5d05588 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/tests/formatBytes.test.js +++ b/packages/strapi-plugin-upload/admin/src/utils/tests/formatBytes.test.js @@ -6,28 +6,24 @@ describe('UPLOAD | components | EditForm | utils', () => { expect(formatBytes(0)).toEqual('0B'); }); - it('should return 0B if less than 1 bytes is passed', () => { - expect(formatBytes(0.9)).toEqual('0B'); - }); - - it('should return 1KB if 1024 Bytes is passed', () => { - expect(formatBytes(1024)).toEqual('1KB'); + it('should return 900B if 0.9 bytes is passed', () => { + expect(formatBytes(0.9)).toEqual('900B'); }); it("should return 1KB if '1024' Bytes is passed", () => { - expect(formatBytes('1024')).toEqual('1KB'); + expect(formatBytes('1024')).toEqual('1000KB'); }); - it('should return 1.21KB if 1034 Bytes is passed', () => { - expect(formatBytes(1234)).toEqual('1.21KB'); + it('should return 1.18MB if 1034 Bytes is passed', () => { + expect(formatBytes(1234)).toEqual('1.18MB'); }); - it('should return 1.21KB if 1034 Bytes is passed with 3 decimals', () => { - expect(formatBytes(1234, 3)).toEqual('1.205KB'); + it('should return 1.177MB if 1234 Bytes is passed with 3 decimals', () => { + expect(formatBytes(1234, 3)).toEqual('1.177MB'); }); - it('should return 1 MB if 1.1e+6 Bytes is passed', () => { - expect(formatBytes(1100000, 0)).toEqual('1MB'); + it('should return 1 GB if 1.1e+6 Bytes is passed', () => { + expect(formatBytes(1100000, 0)).toEqual('1GB'); }); }); }); diff --git a/packages/strapi-plugin-upload/admin/src/utils/tests/getExtension.test.js b/packages/strapi-plugin-upload/admin/src/utils/tests/getExtension.test.js index 5fd311ea73..03394310bd 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/tests/getExtension.test.js +++ b/packages/strapi-plugin-upload/admin/src/utils/tests/getExtension.test.js @@ -1,6 +1,13 @@ import getExtension from '../getExtension'; describe('UPLOAD | utils | getExtension', () => { + it('should return undefined if mime does not exits', () => { + const mime = null; + const expected = 'undefined'; + + expect(getExtension(mime)).toEqual(expected); + }); + it('should return png if mime string is image/png', () => { const mime = 'image/png'; const expected = 'png'; diff --git a/packages/strapi-plugin-upload/admin/src/utils/tests/getType.test.js b/packages/strapi-plugin-upload/admin/src/utils/tests/getType.test.js index 76288544d0..1e0f71853b 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/tests/getType.test.js +++ b/packages/strapi-plugin-upload/admin/src/utils/tests/getType.test.js @@ -1,6 +1,13 @@ import getType from '../getType'; describe('UPLOAD | utils | getType', () => { + it('should return file if mime does not exits', () => { + const mime = undefined; + const expected = 'file'; + + expect(getType(mime)).toEqual(expected); + }); + it('should return image if mime string contains image', () => { const mime = 'image/png'; const expected = 'image';