fix: format attachment size in toolbar upload (#4069)

Author: sfwn

shell/app/charts/__tests__/formatter.test.ts

@@ -0,0 +1,23 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import { getFormatter } from 'charts/utils';
+
+describe('charts/utils#getFormatter', () => {
+  it('formats storage size to human readable text', () => {
+    const formatter = getFormatter('STORAGE', 'B');
+
+    expect(formatter.format(8238634)).toBe('7.86 MB'); // roughly 7.86MB
+    expect(formatter.format(512)).toBe('512 B');
+  });
+});

shell/app/common/components/markdown-editor/__tests__/upload-plugin.test.tsx

@@ -25,34 +25,34 @@ jest.mock('antd', () => {
   const React = require('react');
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const antd = jest.requireActual('antd');
-  const OldUpload = antd.Upload;
-  const Upload: React.FC<UploadProps> = ({ children, onChange, ...rest }) => {
+  const Upload: React.FC<UploadProps> = ({ children, onChange }) => {
     return (
-      <OldUpload
-        {...rest}
-        onChange={(data: UploadChangeParam) => {
-          const file = data.file;
-          const response = {};
-          onChange?.({
-            ...data,
-            file: {
-              status: 'success',
-              response: file.name
-                ? {
-                    success: true,
-                    err: {},
-                    data: {
-                      ...file,
-                      url: 'filePath',
-                    },
-                  }
-                : undefined,
-            },
-          });
-        }}
-      >
+      <label>
+        <input
+          type="file"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (!file) return;
+            onChange?.({
+              file: {
+                ...file,
+                status: 'success',
+                response: {
+                  success: true,
+                  err: {},
+                  data: {
+                    name: file.name,
+                    size: file.size,
+                    url: 'filePath',
+                  },
+                },
+              },
+            } as UploadChangeParam);
+          }}
+          style={{ display: 'none' }}
+        />
         {children}
-      </OldUpload>
+      </label>
     );
   };
   return {
@@ -65,6 +65,15 @@ describe('UploadPlugin', () => {
   const images = new File(['this is an images'], 'logo.png', {
     type: 'image/png',
   });
+  const kbFile = new File([new ArrayBuffer(1024)], 'small.bin', {
+    type: 'application/octet-stream',
+  });
+  const mbFile = new File([new ArrayBuffer(2 * 1024 * 1024)], 'big.bin', {
+    type: 'application/octet-stream',
+  });
+  const decimalFile = new File([new Uint8Array(1500)], 'decimal.bin', {
+    type: 'application/octet-stream',
+  });
   beforeAll(() => {
     jest.mock('agent');
     agent.post = () => ({
@@ -100,7 +109,25 @@ describe('UploadPlugin', () => {
       userEvent.upload(imageUpload, images);
       await flushPromises();
     });
-    expect(insertTextFn).toHaveBeenLastCalledWith('\n![logo.png（17）](filePath)\n');
+    expect(insertTextFn).toHaveBeenLastCalledWith('\n![logo.png（17 B）](filePath)\n');
+
+    await act(async () => {
+      userEvent.upload(imageUpload, kbFile);
+      await flushPromises();
+    });
+    expect(insertTextFn).toHaveBeenLastCalledWith('\n![small.bin（1 KB）](filePath)\n');
+
+    await act(async () => {
+      userEvent.upload(imageUpload, mbFile);
+      await flushPromises();
+    });
+    expect(insertTextFn).toHaveBeenLastCalledWith('\n![big.bin（2 MB）](filePath)\n');
+
+    await act(async () => {
+      userEvent.upload(imageUpload, decimalFile);
+      await flushPromises();
+    });
+    expect(insertTextFn).toHaveBeenLastCalledWith('\n![decimal.bin（1.46 KB）](filePath)\n');
     spyOnError.mockClear();
   });
 });

shell/app/common/components/markdown-editor/upload-plugin.tsx

@@ -16,12 +16,14 @@ import { Popover, message, Upload } from 'antd';
 import { Icon as CustomIcon } from 'common';
 import { getOrgFromPath } from 'common/utils';
 import { getCSRFToken } from 'core/config';
+import { getFormatter } from 'charts/utils';
 import i18n from 'i18n';
 import './upload-plugin.scss';
 
 let isLoading = false;
 let hideLoading: any;
 const UploadPlugin = (props: any) => {
+  const formatSize = (size?: number | string) => getFormatter('STORAGE', 'B').format(Number(size) || 0);
   // let hideLoading: any;
   const getUploadProps = (isImage?: boolean) => ({
     action: '/api/files',
@@ -55,7 +57,8 @@ const UploadPlugin = (props: any) => {
         message.error(err.msg);
       } else {
         const { name, size, url } = data;
-        props.editor.insertText(`\n${isImage ? '!' : ''}[${name}（${size}）](${url})\n`);
+        const formattedSize = formatSize(size);
+        props.editor.insertText(`\n${isImage ? '!' : ''}[${name}（${formattedSize}）](${url})\n`);
       }
     },
   });