chore: Delayed deploy of direct uploads (#3966)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -7,7 +7,7 @@
     >
       <div class="thumb-wrap">
         <img
-          v-if="isTypeImage(attachment.resource.content_type)"
+          v-if="isTypeImage(attachment.resource)"
           class="image-thumb"
           :src="attachment.thumb"
         />
@@ -15,12 +15,12 @@
       </div>
       <div class="file-name-wrap">
         <span class="item">
-          {{ attachment.resource.filename }}
+          {{ fileName(attachment.resource) }}
         </span>
       </div>
       <div class="file-size-wrap">
         <span class="item">
-          {{ formatFileSize(attachment.resource.byte_size) }}
+          {{ formatFileSize(attachment.resource) }}
         </span>
       </div>
       <div class="remove-file-wrap">
@@ -50,12 +50,17 @@ export default {
     onRemoveAttachment(index) {
       this.removeAttachment(index);
     },
-    formatFileSize(size) {
+    formatFileSize(file) {
+      const size = file.byte_size || file.size;
       return formatBytes(size, 0);
     },
-    isTypeImage(type) {
+    isTypeImage(file) {
+      const type = file.content_type || file.type;
       return type.includes('image');
     },
+    fileName(file) {
+      return file.filename || file.name;
+    },
   },
 };
 </script>

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

@@ -25,7 +25,7 @@
           direct_upload_url: '/rails/active_storage/direct_uploads',
           direct_upload: true,
         }"
-        @input-file="onDirectFileUpload"
+        @input-file="onFileUpload"
       >
         <woot-button
           v-if="showAttachButton"
@@ -134,7 +134,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    onDirectFileUpload: {
+    onFileUpload: {
       type: Function,
       default: () => {},
     },

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

@@ -77,7 +77,7 @@
       :mode="replyType"
       :inbox="inbox"
       :send-button-text="replyButtonLabel"
-      :on-direct-file-upload="onDirectFileUpload"
+      :on-file-upload="onFileUpload"
       :show-file-upload="showFileUpload"
       :toggle-emoji-picker="toggleEmojiPicker"
       :show-emoji-picker="showEmojiPicker"
@@ -179,6 +179,7 @@ export default {
       currentChat: 'getSelectedChat',
       messageSignature: 'getMessageSignature',
       currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
     }),
 
     showRichContentEditor() {
@@ -544,6 +545,13 @@ export default {
         isPrivate,
       });
     },
+    onFileUpload(file) {
+      if (this.globalConfig.directUploadsEnabled) {
+        this.onDirectFileUpload(file);
+      } else {
+        this.onIndirectFileUpload(file);
+      }
+    },
     onDirectFileUpload(file) {
       if (!file) {
         return;
@@ -559,13 +567,7 @@ export default {
           if (error) {
             this.showAlert(error);
           } else {
-            this.attachedFiles.push({
-              currentChatId: this.currentChat.id,
-              resource: blob,
-              isPrivate: this.isPrivate,
-              thumb: null,
-              blobSignedId: blob.signed_id,
-            });
+            this.attachFile({ file, blob });
           }
         });
       } else {
@@ -576,22 +578,12 @@ export default {
         );
       }
     },
-    onFileUpload(file) {
+    onIndirectFileUpload(file) {
       if (!file) {
         return;
       }
       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,
-          });
-        };
+        this.attachFile({ file });
       } else {
         this.showAlert(
           this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
@@ -600,6 +592,19 @@ export default {
         );
       }
     },
+    attachFile({ blob, file }) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file.file);
+      reader.onloadend = () => {
+        this.attachedFiles.push({
+          currentChatId: this.currentChat.id,
+          resource: blob || file,
+          isPrivate: this.isPrivate,
+          thumb: reader.result,
+          blobSignedId: blob ? blob.signed_id : undefined,
+        });
+      };
+    },
     removeAttachment(itemIndex) {
       this.attachedFiles = this.attachedFiles.filter(
         (item, index) => itemIndex !== index
@@ -619,7 +624,11 @@ export default {
       if (this.attachedFiles && this.attachedFiles.length) {
         messagePayload.files = [];
         this.attachedFiles.forEach(attachment => {
-          messagePayload.files.push(attachment.blobSignedId);
+          if (this.globalConfig.directUploadsEnabled) {
+            messagePayload.files.push(attachment.blobSignedId);
+          } else {
+            messagePayload.files.push(attachment.resource.file);
+          }
         });
       }