Merge pull request #5736 from strapi/media-lib/size-fix

Media lib size format fix
This commit is contained in:
cyril lopez 2020-04-07 18:36:16 +02:00 committed by GitHub
commit e70a40931b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 101 additions and 37 deletions

View File

@ -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 {

View File

@ -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);

View File

@ -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;
};

View File

@ -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);

View File

@ -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', () => {

View 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;

View File

@ -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';

View File

@ -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');
});
});

View File

@ -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);
});
});
});

View File

@ -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;

View File

@ -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",

View File

@ -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"