diff --git a/frontend/model/contracts/shared/types.js b/frontend/model/contracts/shared/types.js
index 2e9ae671be..40a2ff5e6a 100644
--- a/frontend/model/contracts/shared/types.js
+++ b/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
diff --git a/frontend/views/containers/chatroom/SendArea.vue b/frontend/views/containers/chatroom/SendArea.vue
index 8885d02d72..e8ffc99736 100644
--- a/frontend/views/containers/chatroom/SendArea.vue
+++ b/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.
         }
 
diff --git a/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue b/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
index 0edef12a61..5735f88037 100644
--- a/frontend/views/containers/chatroom/file-attachment/ChatAttachmentPreview.vue
+++ b/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') {{ fileSize(entry) }}
 
       .c-preview-img(v-else)
         img(
@@ -154,6 +156,9 @@ export default {
     fileExt ({ name }) {
       return getFileExtension(name, true)
     },
+    fileSize ({ size }) {
+      return size ? `${size} bytes` : ''
+    },
     fileType ({ mimeType }) {
       return getFileType(mimeType)
     },
@@ -267,8 +272,16 @@ 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;
+        flex-direction: row;
+        column-gap: 0.25rem;
+      }
     }
 
     .c-attachment-actions-wrapper {