fix: Check uploaded file size in widget and dashboard (#1975)

* File size check logic in widget

* set maxium file size

* update locale texts

* file size check in dashboard

* dynamincally set file size limit error message

* code climate review fixes

* add alert mixin

* move attahcment bus event to constants

* Move file size check logic to helper

* add specs for file size limit check helper

* changes as per review

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -11,9 +11,7 @@
           class="image-thumb"
           :src="attachment.thumb"
         />
-        <span v-else class="attachment-thumb">
-          📄
-        </span>
+        <span v-else class="attachment-thumb"> 📄 </span>
       </div>
       <div class="file-name-wrap">
         <span class="item">
@@ -37,8 +35,7 @@
   </div>
 </template>
 <script>
-import { formatBytes } from 'dashboard/helper/files';
-
+import { formatBytes } from 'shared/helpers/FileHelper';
 export default {
   props: {
     attachments: {

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -72,6 +72,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+import alertMixin from 'shared/mixins/alertMixin';
 
 import EmojiInput from 'shared/components/emoji/EmojiInput';
 import CannedResponse from './CannedResponse';
@@ -81,6 +82,9 @@ import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
+
 import {
   isEscape,
   isEnter,
@@ -100,7 +104,7 @@ export default {
     ReplyBottomPanel,
     WootMessageEditor,
   },
-  mixins: [clickaway, inboxMixin, uiSettingsMixin],
+  mixins: [clickaway, inboxMixin, uiSettingsMixin, alertMixin],
   props: {
     inReplyTo: {
       type: [String, Number],
@@ -351,21 +355,28 @@ export default {
       }
     },
     onFileUpload(file) {
-      this.attachedFiles = [];
       if (!file) {
         return;
       }
-      const reader = new FileReader();
-      reader.readAsDataURL(file.file);
-
-      reader.onloadend = () => {
-        this.attachedFiles.push({
-          currentChatId: this.currentChat.id,
-          resource: file,
-          isPrivate: this.isPrivate,
-          thumb: reader.result,
-        });
-      };
+      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+        this.attachedFiles = [];
+        const reader = new FileReader();
+        reader.readAsDataURL(file.file);
+        reader.onloadend = () => {
+          this.attachedFiles.push({
+            currentChatId: this.currentChat.id,
+            resource: file,
+            isPrivate: this.isPrivate,
+            thumb: reader.result,
+          });
+        };
+      } else {
+        this.showAlert(
+          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
+            MAXIMUM_FILE_UPLOAD_SIZE,
+          })
+        );
+      }
     },
     removeAttachment(itemIndex) {
       this.attachedFiles = this.attachedFiles.filter(

app/javascript/dashboard/helper/files.js

@@ -1,11 +0,0 @@
-export const formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0) return '0 Bytes';
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-};

app/javascript/dashboard/helper/specs/files.spec.js

@@ -1,18 +0,0 @@
-import { formatBytes } from '../files';
-
-describe('#File Helpers', () => {
-  describe('formatBytes', () => {
-    it('should return zero bytes if 0 is passed', () => {
-      expect(formatBytes(0)).toBe('0 Bytes');
-    });
-    it('should return in bytes if 1000 is passed', () => {
-      expect(formatBytes(1000)).toBe('1000 Bytes');
-    });
-    it('should return in KB if 100000 is passed', () => {
-      expect(formatBytes(10000)).toBe('9.77 KB');
-    });
-    it('should return in MB if 10000000 is passed', () => {
-      expect(formatBytes(10000000)).toBe('9.54 MB');
-    });
-  });
-});

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -58,6 +58,7 @@
     "CHANGE_STATUS": "Conversation status changed",
     "CHANGE_AGENT": "Conversation Assignee changed",
     "CHANGE_TEAM": "Conversation team changed",
+    "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
     "SENT_BY": "Sent by:",
     "ASSIGNMENT": {
       "SELECT_AGENT": "Select Agent",