diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/formatFilter.js b/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/formatFilter.js index 4710126fbc..0fc1ba12c6 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/formatFilter.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/formatFilter.js @@ -1,9 +1,18 @@ import moment from 'moment'; import { dateFormats, dateToUtcTime } from 'strapi-helper-plugin'; +import { formatBytes } from '../../../utils'; const formatFilter = filterToFormat => { const { name, filter, value } = filterToFormat; + // Size filter - Convert bites to human-readable format + if (name === 'size') { + return { + ...filterToFormat, + value: formatBytes(value), + }; + } + // Mime filter - Display different wording than the received ones if (name === 'mime') { return { diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/tests/formatFilter.test.js b/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/tests/formatFilter.test.js index 4edb372e92..5f3328fba5 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/tests/formatFilter.test.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersList/utils/tests/formatFilter.test.js @@ -50,17 +50,17 @@ describe('UPLOAD | components | FiltersList | utils', () => { expect(formatFilter(filter)).toEqual(expected); }); - it('should return initial filter is name is not mime and value is not a date', () => { + it('should return formatted value if name is size', () => { const filter = { name: 'size', filter: '=', - value: '0KB', + value: 1000, }; const expected = { name: 'size', filter: '=', - value: '0KB', + value: '1MB', }; expect(formatFilter(filter)).toEqual(expected); diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/formatFilter.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/formatFilter.js index 4f654ffb29..e71b66811a 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/formatFilter.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/formatFilter.js @@ -1,12 +1,17 @@ import moment from 'moment'; +import { unformatBytes } from '../../../utils'; const formatFilter = filter => { - const { value } = filter; + const { name, value } = filter; if (value._isAMomentObject === true) { return { ...filter, value: moment(value).format() }; } + if (name === 'size') { + return { ...filter, value: unformatBytes(value) }; + } + return filter; }; diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/tests/formatFilter.test.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/tests/formatFilter.test.js index 35651551c1..00c70c294c 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/tests/formatFilter.test.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/utils/tests/formatFilter.test.js @@ -4,17 +4,17 @@ import formatFilter from '../formatFilter'; describe('UPLOAD | components | FiltersPicker | utils', () => { describe('formatFilter', () => { - it('should return current filter if value is not a moment object', () => { + it('should return formatted filter value if name is size', () => { const filter = { name: 'size', filter: '=', - value: '10KB', + value: '10MB', }; const expected = { name: 'size', filter: '=', - value: '10KB', + value: 10000, }; expect(formatFilter(filter)).toEqual(expected); diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/utils/tests/generateStringFromParams.test.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/utils/tests/generateStringFromParams.test.js index 577475d65f..5df674ffe5 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/utils/tests/generateStringFromParams.test.js +++ b/packages/strapi-plugin-upload/admin/src/containers/HomePage/utils/tests/generateStringFromParams.test.js @@ -2,24 +2,22 @@ import generateStringFromParams from '../generateStringFromParams'; describe('MEDIA LIBRARY | containers | HomePage | utils', () => { describe('generateStringFromParams', () => { - describe('return a string with query params', () => { - it('if query is empty', () => { - const search = ''; - const query = new URLSearchParams(search); + it('should return a string with query params if query is empty', () => { + const search = ''; + const query = new URLSearchParams(search); - const expected = '_limit=10&_start=0'; + const expected = '_limit=10&_start=0'; - expect(generateStringFromParams(query)).toEqual(expected); - }); + expect(generateStringFromParams(query)).toEqual(expected); + }); - it('if search is not empty', () => { - const search = '_limit=20&_start=0&mime_contains=image'; - const query = new URLSearchParams(search); + it('should return a string with query params if search is not empty', () => { + const search = '_limit=20&_start=0&mime_contains=image'; + const query = new URLSearchParams(search); - const expected = '_limit=20&_start=0&mime_contains=image'; + const expected = '_limit=20&_start=0&mime_contains=image'; - expect(generateStringFromParams(query)).toEqual(expected); - }); + expect(generateStringFromParams(query)).toEqual(expected); }); describe('return a string with converted filters if value is file', () => { diff --git a/packages/strapi-plugin-upload/admin/src/utils/formatBytes.js b/packages/strapi-plugin-upload/admin/src/utils/formatBytes.js index 8d9a8b2447..cc3ba0c158 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/formatBytes.js +++ b/packages/strapi-plugin-upload/admin/src/utils/formatBytes.js @@ -1,17 +1,13 @@ -// Source: https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript -function formatBytes(receivedBytes, decimals) { - const bytes = receivedBytes * 1000; +import byteSize from 'byte-size'; - if (bytes < 1) { +function formatBytes(receivedBytes, decimals = 0) { + const { value, unit } = byteSize(receivedBytes * 1000, { precision: decimals }); + + if (!unit) { return '0B'; } - const k = 1024; - const dm = decimals <= 0 ? 0 : decimals || 2; - const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; - const i = Math.floor(Math.log(bytes) / Math.log(k)); - - return `${parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`; + return `${value}${unit.toUpperCase()}`; } export default formatBytes; diff --git a/packages/strapi-plugin-upload/admin/src/utils/index.js b/packages/strapi-plugin-upload/admin/src/utils/index.js index 65b6e91ecf..1a92f2502f 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/index.js +++ b/packages/strapi-plugin-upload/admin/src/utils/index.js @@ -16,4 +16,5 @@ export { default as getTrad } from './getTrad'; export { default as getType } from './getType'; export { default as getYupError } from './getYupError'; export { default as ItemTypes } from './ItemTypes'; +export { default as unformatBytes } from './unformatBytes'; export { default as urlSchema } from './urlYupSchema'; 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 29c5d05588..bc0e789971 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 @@ -10,19 +10,23 @@ describe('UPLOAD | components | EditForm | utils', () => { expect(formatBytes(0.9)).toEqual('900B'); }); - it("should return 1KB if '1024' Bytes is passed", () => { - expect(formatBytes('1024')).toEqual('1000KB'); + it("should return 1MB if '1024' Bytes is passed", () => { + expect(formatBytes('1024')).toEqual('1MB'); }); - it('should return 1.18MB if 1034 Bytes is passed', () => { - expect(formatBytes(1234)).toEqual('1.18MB'); + it('should return 1MB if 1234 is passed', () => { + expect(formatBytes(1234)).toEqual('1MB'); }); - it('should return 1.177MB if 1234 Bytes is passed with 3 decimals', () => { - expect(formatBytes(1234, 3)).toEqual('1.177MB'); + it('should return 1.23MB if 1234 Bytes is passed with 2 decimals', () => { + expect(formatBytes(1234, 2)).toEqual('1.23MB'); }); - it('should return 1 GB if 1.1e+6 Bytes is passed', () => { + it('should return 1.234MB if 1234 Bytes is passed with 3 decimals', () => { + expect(formatBytes(1234, 3)).toEqual('1.234MB'); + }); + + it('should return 1GB if 1100000 is passed', () => { expect(formatBytes(1100000, 0)).toEqual('1GB'); }); }); diff --git a/packages/strapi-plugin-upload/admin/src/utils/tests/unformatBytes.test.js b/packages/strapi-plugin-upload/admin/src/utils/tests/unformatBytes.test.js new file mode 100644 index 0000000000..203fe740a1 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/utils/tests/unformatBytes.test.js @@ -0,0 +1,29 @@ +import unformatBytes from '../unformatBytes'; + +describe('UPLOAD | components | EditForm | utils', () => { + describe('unformatBytes', () => { + it('should return 1 if 1KB is passed', () => { + expect(unformatBytes('1KB')).toEqual(1); + }); + + it('should return 10 if 10KB is passed', () => { + expect(unformatBytes('10KB')).toEqual(10); + }); + + it('should return 1000 if 1MB is passed', () => { + expect(unformatBytes('1MB')).toEqual(1000); + }); + + it('should return 20000 if 20MB is passed', () => { + expect(unformatBytes('20MB')).toEqual(20000); + }); + + it('should return 1000000 if 1GB is passed', () => { + expect(unformatBytes('1GB')).toEqual(1000000); + }); + + it('should return 100000000 if 100GB is passed', () => { + expect(unformatBytes('100GB')).toEqual(100000000); + }); + }); +}); diff --git a/packages/strapi-plugin-upload/admin/src/utils/unformatBytes.js b/packages/strapi-plugin-upload/admin/src/utils/unformatBytes.js new file mode 100644 index 0000000000..d2e8d9a16a --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/utils/unformatBytes.js @@ -0,0 +1,16 @@ +function unformatBytes(value) { + const sizes = ['B', 'KB', 'MB', 'GB']; + const k = 1000; + + const number = value.split(/KB|MB|GB/)[0]; + const unit = value.split(number)[1]; + + const i = sizes.findIndex(size => size === unit); + + const multiplicator = k ** i; + const newValue = number * multiplicator; + + return newValue / 1000; +} + +export default unformatBytes; diff --git a/packages/strapi-plugin-upload/package.json b/packages/strapi-plugin-upload/package.json index a6b86f9f7d..65c7de2b4a 100644 --- a/packages/strapi-plugin-upload/package.json +++ b/packages/strapi-plugin-upload/package.json @@ -11,6 +11,7 @@ "test": "echo \"no tests yet\"" }, "dependencies": { + "byte-size": "^6.2.0", "cropperjs": "^1.5.6", "filenamify": "4.1.0", "immer": "^6.0.2", diff --git a/yarn.lock b/yarn.lock index 45bb1f6aa9..d8816b78a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4641,6 +4641,11 @@ byte-size@^5.0.1: resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-5.0.1.tgz#4b651039a5ecd96767e71a3d7ed380e48bed4191" integrity sha512-/XuKeqWocKsYa/cBY1YbSJSWWqTi4cFgr9S6OyM7PBaPbr9zvNGwWP33vt0uqGhwDdN+y3yhbXVILEUpnwEWGw== +byte-size@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-6.2.0.tgz#39fd52adedbbf7e8c3b3f7dea05e441549375c28" + integrity sha512-6EspYUCAPMc7E2rltBgKwhG+Cmk0pDm9zDtF1Awe2dczNUL3YpZ8mTs/dueOTS1hqGWBOatqef4jYMGjln7WmA== + bytes@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"