fix file size issue (#319)

bcgov · May 13, 2021 · 2fb8012 · 2fb8012
1 parent 1f6a2ff
commit 2fb8012
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/app/src/components/attachments/AttachmentsList.test.tsx b/app/src/components/attachments/AttachmentsList.test.tsx
@@ -30,6 +30,18 @@ describe('AttachmentsList', () => {
       fileName: 'filename.test',
       lastModified: '2021-04-09 11:53:53',
       size: 3028
+    },
+    {
+      id: 20,
+      fileName: 'filename20.test',
+      lastModified: '2021-04-09 11:53:53',
+      size: 30280000
+    },
+    {
+      id: 30,
+      fileName: 'filename30.test',
+      lastModified: '2021-04-09 11:53:53',
+      size: 30280000000
     }
   ];
 
@@ -39,12 +51,14 @@ describe('AttachmentsList', () => {
     expect(getByText('No Attachments')).toBeInTheDocument();
   });
 
-  it('renders correctly with attachments', async () => {
+  it('renders correctly with attachments (of various sizes)', async () => {
     const { getByText } = render(
       <AttachmentsList projectId={1} attachmentsList={attachmentsList} getAttachments={jest.fn()} />
     );
 
     expect(getByText('filename.test')).toBeInTheDocument();
+    expect(getByText('filename20.test')).toBeInTheDocument();
+    expect(getByText('filename30.test')).toBeInTheDocument();
   });
 
   it('viewing file contents in new tab works as expected', async () => {

diff --git a/app/src/components/attachments/AttachmentsList.tsx b/app/src/components/attachments/AttachmentsList.tsx
@@ -84,6 +84,21 @@ const AttachmentsList: React.FC<IAttachmentsListProps> = (props) => {
     }
   };
 
+  const getFormattedFileSize = (fileSize: number) => {
+    // kilobyte size
+    if (fileSize < 1000000) {
+      return `${(fileSize / 1000).toFixed(1)} KB`;
+    }
+
+    // megabyte size
+    if (fileSize < 1000000000) {
+      return `${(fileSize / 1000000).toFixed(1)} MB`;
+    }
+
+    // gigabyte size
+    return `${(fileSize / 1000000000).toFixed(1)} GB`;
+  };
+
   return (
     <>
       <YesNoDialog
@@ -118,7 +133,7 @@ const AttachmentsList: React.FC<IAttachmentsListProps> = (props) => {
                       </Link>
                     </TableCell>
                     <TableCell>{getFormattedDate(DATE_FORMAT.ShortDateFormatMonthFirst, row.lastModified)}</TableCell>
-                    <TableCell>{row.size / 1000000} MB</TableCell>
+                    <TableCell>{getFormattedFileSize(row.size)}</TableCell>
                     <TableCell align="right" className={clsx(index === 0 && classes.tableCellBorderTop)}>
                       <IconButton
                         color="primary"