chore: Allow more filetypes in uploads (#3557)

- Allowing the ability to upload more common file types like zip, Docx etc
- Fallback for image bubble when the image URL isn't available

fixes: #3270

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -15,7 +15,7 @@
       <file-upload
         ref="upload"
         :size="4096 * 4096"
-        accept="image/png, image/jpeg, image/gif, image/bmp, image/tiff, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
+        :accept="allowedFileTypes"
         :drop="true"
         :drop-directory="false"
         @input-file="onFileUpload"
@@ -84,6 +84,7 @@ import {
   hasPressedAltAndAKey,
 } from 'shared/helpers/KeyboardHelpers';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 
 import { REPLY_EDITOR_MODES } from './constants';
 export default {
@@ -161,6 +162,9 @@ export default {
     showAttachButton() {
       return this.showFileUpload || this.isNote;
     },
+    allowedFileTypes() {
+      return ALLOWED_FILE_TYPES;
+    },
   },
   methods: {
     handleKeyEvents(e) {

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

@@ -24,9 +24,10 @@
         <div v-if="!isPending && hasAttachments">
           <div v-for="attachment in data.attachments" :key="attachment.id">
             <bubble-image
-              v-if="attachment.file_type === 'image'"
+              v-if="attachment.file_type === 'image' && !hasImageError"
               :url="attachment.data_url"
               :readable-time="readableTime"
+              @error="onImageLoadError"
             />
             <audio v-else-if="attachment.file_type === 'audio'" controls>
               <source :src="attachment.data_url" />
@@ -133,6 +134,7 @@ export default {
   data() {
     return {
       showContextMenu: false,
+      hasImageError: false,
     };
   },
   computed: {
@@ -287,12 +289,20 @@ export default {
       return messageType ? 'right' : 'left';
     },
   },
+  watch: {
+    data() {
+      this.hasImageError = false;
+    },
+  },
+  mounted() {
+    this.hasImageError = false;
+  },
   methods: {
     hasMediaAttachment(type) {
       if (this.hasAttachments && this.data.attachments.length > 0) {
         const { attachments = [{}] } = this.data;
         const { file_type: fileType } = attachments[0];
-        return fileType === type;
+        return fileType === type && !this.hasImageError;
       }
       return false;
     },
@@ -317,6 +327,9 @@ export default {
       this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
       this.showContextMenu = false;
     },
+    onImageLoadError() {
+      this.hasImageError = true;
+    },
   },
 };
 </script>

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="image message-text__wrap">
-    <img :src="url" @click="onClick" />
+    <img :src="url" @click="onClick" @error="onImgError()" />
     <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
       <img :src="url" class="modal-image" />
     </woot-modal>
@@ -9,6 +9,7 @@
 
 <script>
 export default {
+  components: {},
   props: {
     url: {
       type: String,
@@ -27,6 +28,9 @@ export default {
     onClick() {
       this.show = true;
     },
+    onImgError() {
+      this.$emit('error');
+    },
   },
 };
 </script>