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/widget/components/ChatAttachment.vue

@@ -4,7 +4,7 @@
     accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
     @input-file="onFileUpload"
   >
-    <span class="attachment-button ">
+    <span class="attachment-button">
       <i v-if="!isUploading.image" class="ion-android-attach" />
       <spinner v-if="isUploading" size="small" />
     </span>
@@ -14,6 +14,9 @@
 <script>
 import FileUpload from 'vue-upload-component';
 import Spinner from 'shared/components/Spinner.vue';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: { FileUpload, Spinner },
@@ -31,14 +34,21 @@ export default {
       return fileType.includes('image') ? 'image' : 'file';
     },
     async onFileUpload(file) {
+      if (!file) {
+        return;
+      }
       this.isUploading = true;
       try {
-        const thumbUrl = window.URL.createObjectURL(file.file);
-        await this.onAttach({
-          fileType: this.getFileType(file.type),
-          file: file.file,
-          thumbUrl,
-        });
+        if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+          const thumbUrl = window.URL.createObjectURL(file.file);
+          await this.onAttach({
+            fileType: this.getFileType(file.type),
+            file: file.file,
+            thumbUrl,
+          });
+        } else {
+          window.bus.$emit(BUS_EVENTS.ATTACHMENT_SIZE_CHECK_ERROR);
+        }
       } catch (error) {
         // Error
       }

app/javascript/widget/i18n/locale/en.json

@@ -48,5 +48,6 @@
         "ERROR": "Message too short"
       }
     }
-  }
+  },
+  "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit"
 }

app/javascript/widget/views/Home.vue

@@ -34,6 +34,15 @@
         />
       </transition>
     </div>
+    <div v-if="showAttachmentError" class="banner">
+      <span>
+        {{
+          $t('FILE_SIZE_LIMIT', {
+            MAXIMUM_FILE_UPLOAD_SIZE: fileUploadSizeLimit,
+          })
+        }}
+      </span>
+    </div>
     <div class="flex flex-1 overflow-auto">
       <conversation-wrap
         v-if="currentView === 'messageView'"
@@ -80,6 +89,8 @@ import configMixin from '../mixins/configMixin';
 import TeamAvailability from 'widget/components/TeamAvailability';
 import Spinner from 'shared/components/Spinner.vue';
 import { mapGetters } from 'vuex';
+import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import PreChatForm from '../components/PreChat/Form';
 export default {
   name: 'Home',
@@ -105,7 +116,7 @@ export default {
     },
   },
   data() {
-    return { isOnCollapsedView: false };
+    return { isOnCollapsedView: false, showAttachmentError: false };
   },
   computed: {
     ...mapGetters({
@@ -132,6 +143,9 @@ export default {
     isOpen() {
       return this.conversationAttributes.status === 'open';
     },
+    fileUploadSizeLimit() {
+      return MAXIMUM_FILE_UPLOAD_SIZE;
+    },
     showInputTextArea() {
       if (this.hideInputForBotConversations) {
         if (this.isOpen) {
@@ -154,6 +168,14 @@ export default {
       );
     },
   },
+  mounted() {
+    bus.$on(BUS_EVENTS.ATTACHMENT_SIZE_CHECK_ERROR, () => {
+      this.showAttachmentError = true;
+      setTimeout(() => {
+        this.showAttachmentError = false;
+      }, 3000);
+    });
+  },
   methods: {
     startConversation() {
       this.isOnCollapsedView = !this.isOnCollapsedView;
@@ -221,5 +243,13 @@ export default {
   .input-wrap {
     padding: 0 $space-normal;
   }
+  .banner {
+    background: $color-error;
+    color: $color-white;
+    font-size: $font-size-default;
+    font-weight: $font-weight-bold;
+    padding: $space-slab;
+    text-align: center;
+  }
 }
 </style>