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

Media lib size format fix

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 {

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

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

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

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('should return a string with query params if query is empty', () => {
-      it('if query is empty', () => {
+      const search = '';
-        const search = '';
+      const query = new URLSearchParams(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', () => {
+    it('should return a string with query params if search is not empty', () => {
-        const search = '_limit=20&_start=0&mime_contains=image';
+      const search = '_limit=20&_start=0&mime_contains=image';
-        const query = new URLSearchParams(search);
+      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', () => {

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
+import byteSize from 'byte-size';
-function formatBytes(receivedBytes, decimals) {
-  const bytes = receivedBytes * 1000;
 
-  if (bytes < 1) {
+function formatBytes(receivedBytes, decimals = 0) {
+  const { value, unit } = byteSize(receivedBytes * 1000, { precision: decimals });
+
+  if (!unit) {
     return '0B';
   }
 
-  const k = 1024;
+  return `${value}${unit.toUpperCase()}`;
-  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]}`;
 }
 
 export default formatBytes;

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

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", () => {
+    it("should return 1MB if '1024' Bytes is passed", () => {
-      expect(formatBytes('1024')).toEqual('1000KB');
+      expect(formatBytes('1024')).toEqual('1MB');
     });
 
-    it('should return 1.18MB if 1034 Bytes is passed', () => {
+    it('should return 1MB if 1234 is passed', () => {
-      expect(formatBytes(1234)).toEqual('1.18MB');
+      expect(formatBytes(1234)).toEqual('1MB');
     });
 
-    it('should return 1.177MB if 1234 Bytes is passed with 3 decimals', () => {
+    it('should return 1.23MB if 1234 Bytes is passed with 2 decimals', () => {
-      expect(formatBytes(1234, 3)).toEqual('1.177MB');
+      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');
     });
   });

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

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;

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

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"