chore: Delayed deploy of direct uploads (#3966)

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

app/builders/messages/message_builder.rb

@@ -29,10 +29,12 @@ class Messages::MessageBuilder
     return if @attachments.blank?
 
     @attachments.each do |uploaded_attachment|
-      @message.attachments.build(
+      attachment = @message.attachments.build(
         account_id: @message.account_id,
         file: uploaded_attachment
       )
+
+      attachment.file_type = file_type(uploaded_attachment&.content_type) if uploaded_attachment.is_a?(ActionDispatch::Http::UploadedFile)
     end
   end
 

app/controllers/api/v1/widget/messages_controller.rb

@@ -29,10 +29,12 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
     return if params[:message][:attachments].blank?
 
     params[:message][:attachments].each do |uploaded_attachment|
-      @message.attachments.new(
+      attachment = @message.attachments.new(
         account_id: @message.account_id,
         file: uploaded_attachment
       )
+
+      attachment.file_type = helpers.file_type(uploaded_attachment&.content_type) if uploaded_attachment.is_a?(ActionDispatch::Http::UploadedFile)
     end
   end
 

app/controllers/dashboard_controller.rb

@@ -25,7 +25,8 @@ class DashboardController < ActionController::Base
       'API_CHANNEL_NAME',
       'API_CHANNEL_THUMBNAIL',
       'ANALYTICS_TOKEN',
-      'ANALYTICS_HOST'
+      'ANALYTICS_HOST',
+      'DIRECT_UPLOADS_ENABLED'
     ).merge(app_config)
   end
 

app/controllers/widgets_controller.rb

@@ -10,7 +10,7 @@ class WidgetsController < ActionController::Base
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED')
   end
 
   def set_web_widget

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({
+            this.attachFile({ file, blob });
-              currentChatId: this.currentChat.id,
-              resource: blob,
-              isPrivate: this.isPrivate,
-              thumb: null,
-              blobSignedId: blob.signed_id,
-            });
           }
         });
       } else {
@@ -576,22 +578,12 @@ export default {
         );
       }
     },
-    onFileUpload(file) {
+    onIndirectFileUpload(file) {
       if (!file) {
         return;
       }
       if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
-        this.attachedFiles = [];
+        this.attachFile({ file });
-        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', {
@@ -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 => {
+          if (this.globalConfig.directUploadsEnabled) {
             messagePayload.files.push(attachment.blobSignedId);
+          } else {
+            messagePayload.files.push(attachment.resource.file);
+          }
         });
       }
 

app/javascript/shared/store/globalConfig.js

@@ -5,6 +5,7 @@ const {
   BRAND_NAME: brandName,
   CHATWOOT_INBOX_TOKEN: chatwootInboxToken,
   CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
+  DIRECT_UPLOADS_ENABLED: directUploadsEnabled,
   DISPLAY_MANIFEST: displayManifest,
   INSTALLATION_NAME: installationName,
   LOGO_THUMBNAIL: logoThumbnail,
@@ -21,6 +22,7 @@ const state = {
   brandName,
   chatwootInboxToken,
   createNewAccountFromDashboard,
+  directUploadsEnabled: directUploadsEnabled === 'true',
   displayManifest,
   installationName,
   logo,

app/javascript/widget/api/endPoints.js

@@ -41,7 +41,12 @@ const sendAttachment = ({ attachment }) => {
   const { file } = attachment;
 
   const formData = new FormData();
+  if (typeof file === 'string') {
     formData.append('message[attachments][]', file);
+  } else {
+    formData.append('message[attachments][]', file, file.name);
+  }
+
   formData.append('message[referer_url]', referrerURL);
   formData.append('message[timestamp]', timestamp);
   return {

app/javascript/widget/components/ChatAttachment.vue

@@ -2,8 +2,11 @@
   <file-upload
     :size="4096 * 2048"
     :accept="allowedFileTypes"
-    :data="{ direct_upload_url: '', direct_upload: true }"
+    :data="{
-    @input-file="onDirectFileUpload"
+      direct_upload_url: '/rails/active_storage/direct_uploads',
+      direct_upload: true,
+    }"
+    @input-file="onFileUpload"
   >
     <button class="icon-button flex items-center justify-center">
       <fluent-icon v-if="!isUploading.image" icon="attach" />
@@ -23,6 +26,7 @@ import {
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import { DirectUpload } from 'activestorage';
+import { mapGetters } from 'vuex';
 
 export default {
   components: { FluentIcon, FileUpload, Spinner },
@@ -36,6 +40,7 @@ export default {
     return { isUploading: false };
   },
   computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
     fileUploadSizeLimit() {
       return MAXIMUM_FILE_UPLOAD_SIZE;
     },
@@ -47,6 +52,13 @@ export default {
     getFileType(fileType) {
       return fileType.includes('image') ? 'image' : 'file';
     },
+    async onFileUpload(file) {
+      if (this.globalConfig.directUploadsEnabled) {
+        this.onDirectFileUpload(file);
+      } else {
+        this.onIndirectFileUpload(file);
+      }
+    },
     async onDirectFileUpload(file) {
       if (!file) {
         return;
@@ -68,8 +80,8 @@ export default {
               });
             } else {
               this.onAttach({
-                fileType: blob.content_type,
                 file: blob.signed_id,
+                ...this.getLocalFileAttributes(file),
               });
             }
           });
@@ -85,18 +97,16 @@ export default {
       }
       this.isUploading = false;
     },
-    async onFileUpload(file) {
+    async onIndirectFileUpload(file) {
       if (!file) {
         return;
       }
       this.isUploading = true;
       try {
         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,
+            ...this.getLocalFileAttributes(file),
           });
         } else {
           window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
@@ -110,6 +120,12 @@ export default {
       }
       this.isUploading = false;
     },
+    getLocalFileAttributes(file) {
+      return {
+        thumbUrl: window.URL.createObjectURL(file.file),
+        fileType: this.getFileType(file.type),
+      };
+    },
   },
 };
 </script>

config/installation_config.yml

@@ -44,3 +44,6 @@
   value:
 - name: ANALYTICS_HOST
   value:
+- name: DIRECT_UPLOADS_ENABLED
+  value: false
+  locked: false

db/migrate/20220207124741_add_direct_uploads_to_installation_config.rb

@@ -0,0 +1,5 @@
+class AddDirectUploadsToInstallationConfig < ActiveRecord::Migration[6.1]
+  def change
+    ConfigLoader.new.process
+  end
+end