mirror of
https://github.com/strapi/strapi.git
synced 2025-11-03 11:25:17 +00:00
Merge pull request #5736 from strapi/media-lib/size-fix
Media lib size format fix
This commit is contained in:
commit
e70a40931b
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user