#2429 - File attachment in chat should show the size

frontend/model/contracts/shared/types.js

@@ -2,7 +2,7 @@
 
 import {
   objectOf, objectMaybeOf, arrayOf, unionOf, boolean,
-  object, string, stringMax, optional, number, mapOf, literalOf
+  object, string, stringMax, optional, number, mapOf, literalOf, numberRange
 } from '~/frontend/model/contracts/misc/flowTyper.js'
 import {
   CHATROOM_TYPES,
@@ -19,6 +19,7 @@ import {
   CHATROOM_NAME_LIMITS_IN_CHARS,
   CHATROOM_DESCRIPTION_LIMITS_IN_CHARS
 } from './constants.js'
+import { CHAT_ATTACHMENT_SIZE_LIMIT } from '~/frontend/utils/constants.js'
 
 // group.js related
 
@@ -67,6 +68,7 @@ export const messageType: any = objectMaybeOf({
   attachments: arrayOf(objectOf({
     name: string,
     mimeType: string,
+    size: optional(numberRange(1, CHAT_ATTACHMENT_SIZE_LIMIT)),
     dimension: optional(objectOf({
       width: number,
       height: number

frontend/views/containers/chatroom/SendArea.vue

@@ -748,6 +748,7 @@ export default ({
           url: fileUrl,
           name: file.name,
           mimeType: file.type || '',
+          size: fileSize,
           downloadData: null // NOTE: we can tell if the attachment has been uploaded by seeing if this field is non-null.
         }
 

frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue

@@ -15,7 +15,9 @@
 
         .c-non-image-file-info
           .c-file-name.has-ellipsis {{ entry.name }}
-          .c-file-ext {{ fileExt(entry) }}
+          .c-file-ext-and-size
+            .c-file-ext {{ fileExt(entry) }}
+            .c-file-size(v-if='entry.size') {{ fileSizeDisplay(entry) }}
 
       .c-preview-img(v-else)
         img(
@@ -36,7 +38,7 @@
         .c-attachment-actions
           tooltip(
             direction='top'
-            :text='L("Download")'
+            :text='getDownloadTooltipText(entry)'
           )
             button.is-icon-small(
               :aria-label='L("Download")'
@@ -91,9 +93,10 @@
 import sbp from '@sbp/sbp'
 import Tooltip from '@components/Tooltip.vue'
 import { MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
-import { getFileExtension, getFileType } from '@view-utils/filters.js'
+import { getFileExtension, getFileType, formatBytesDecimal } from '@view-utils/filters.js'
 import { Secret } from '~/shared/domains/chelonia/Secret.js'
 import { OPEN_MODAL } from '@utils/events.js'
+import { L } from '@common/common.js'
 
 export default {
   name: 'ChatAttachmentPreview',
@@ -154,6 +157,14 @@ export default {
     fileExt ({ name }) {
       return getFileExtension(name, true)
     },
+    fileSizeDisplay ({ size }) {
+      return size ? formatBytesDecimal(size) : ''
+    },
+    getDownloadTooltipText ({ size }) {
+      return this.shouldPreviewImages
+        ? `${L('Download ({size})', { size: formatBytesDecimal(size) })}`
+        : L('Download')
+    },
     fileType ({ mimeType }) {
       return getFileType(mimeType)
     },
@@ -267,8 +278,22 @@ export default {
   &.is-for-download {
     padding: 0;
 
-    .c-preview-non-image .c-non-image-file-info {
-      width: calc(100% - 4rem);
+    .c-preview-non-image {
+      .c-non-image-file-info {
+        width: calc(100% - 4rem);
+      }
+
+      .c-file-ext-and-size {
+        display: flex;
+        align-items: flex-end;
+        flex-direction: row;
+        column-gap: 0.325rem;
+      }
+
+      .c-file-size {
+        color: $text_1;
+        font-size: 0.8em;
+      }
     }
 
     .c-attachment-actions-wrapper {
@@ -301,6 +326,8 @@ export default {
     .is-download-item {
       &:hover .c-attachment-actions-wrapper {
         display: flex;
+        flex-direction: column;
+        align-items: flex-end;
       }
 
       .c-preview-non-image {

frontend/views/utils/filters.js

@@ -15,6 +15,17 @@ export const getFileType = (
   return mimeType.match('image/') ? 'image' : 'non-image'
 }
 
+export const formatBytesDecimal = (bytes: number, decimals: number = 2): string => {
+  if (bytes === 0) { return '0 Bytes' }
+
+  const k = 1000 // Decimal base
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  const formattedValue = parseFloat((bytes / Math.pow(k, i)).toFixed(decimals))
+  return `${formattedValue} ${sizes[i]}`
+}
+
 /**
  * this function filters `list` by `keyword`
  * `list` should be an array of objects and strings