fix: Set limit for displaying attachment content

Closes #1141

client/src/components/attachments/Attachments/Item.jsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { Item as GalleryItem } from 'react-photoswipe-gallery';
 
 import selectors from '../../../selectors';
+import Config from '../../../constants/Config';
 import Encodings from '../../../constants/Encodings';
 import { AttachmentTypes } from '../../../constants/Enums';
 import ItemContent from './ItemContent';
@@ -70,6 +71,7 @@ const Item = React.memo(({ id, isVisible }) => {
           break;
         default:
           if (attachment.data.encoding === Encodings.UTF8) {
+            if (attachment.data.sizeInBytes <= Config.MAX_SIZE_IN_BYTES_TO_DISPLAY_CONTENT) {
               content = (
                 <ContentViewer
                   src={attachment.data.url}
@@ -77,6 +79,13 @@ const Item = React.memo(({ id, isVisible }) => {
                   className={classNames(styles.content, styles.contentViewer)}
                 />
               );
+            } else {
+              content = (
+                <span className={classNames(styles.content, styles.contentError)}>
+                  {t('common.contentOfThisAttachmentIsTooBigToDisplay')}
+                </span>
+              );
+            }
           } else {
             content = (
               <span className={classNames(styles.content, styles.contentError)}>

client/src/constants/Config.js

@@ -15,6 +15,8 @@ const CARDS_LIMIT = 50;
 const COMMENTS_LIMIT = 50;
 const ACTIVITIES_LIMIT = 50;
 
+const MAX_SIZE_IN_BYTES_TO_DISPLAY_CONTENT = 256 * 1024;
+
 const IS_MAC = navigator.platform.startsWith('Mac');
 
 export default {
@@ -26,5 +28,6 @@ export default {
   CARDS_LIMIT,
   COMMENTS_LIMIT,
   ACTIVITIES_LIMIT,
+  MAX_SIZE_IN_BYTES_TO_DISPLAY_CONTENT,
   IS_MAC,
 };

client/src/locales/en-GB/core.js

@@ -115,6 +115,7 @@ export default {
       color: 'Color',
       comments: 'Comments',
       contentExceedsLimit: 'Content exceeds {{limit}}',
+      contentOfThisAttachmentIsTooBigToDisplay: 'Content of this attachment is too big to display.',
       copy_inline: 'copy',
       createBoard_title: 'Create Board',
       createCustomFieldGroup_title: 'Create Custom Field Group',

client/src/locales/en-US/core.js

@@ -110,6 +110,7 @@ export default {
       color: 'Color',
       comments: 'Comments',
       contentExceedsLimit: 'Content exceeds {{limit}}',
+      contentOfThisAttachmentIsTooBigToDisplay: 'Content of this attachment is too big to display.',
       copy_inline: 'copy',
       createBoard_title: 'Create Board',
       createCustomFieldGroup_title: 'Create Custom Field Group',