feat: Activestorage direct upload (#3768)

app/builders/messages/message_builder.rb

@@ -31,7 +31,6 @@ class Messages::MessageBuilder
     @attachments.each do |uploaded_attachment|
       @message.attachments.build(
         account_id: @message.account_id,
-        file_type: file_type(uploaded_attachment&.content_type),
         file: uploaded_attachment
       )
     end

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

@@ -31,7 +31,6 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
     params[:message][:attachments].each do |uploaded_attachment|
       @message.attachments.new(
         account_id: @message.account_id,
-        file_type: helpers.file_type(uploaded_attachment&.content_type),
         file: uploaded_attachment
       )
     end

app/javascript/dashboard/api/inbox/message.js

@@ -14,12 +14,12 @@ export const buildCreatePayload = ({
   let payload;
   if (files && files.length !== 0) {
     payload = new FormData();
-    files.forEach(file => {
-      payload.append('attachments[]', file, file.name);
-    });
     if (message) {
       payload.append('content', message);
     }
+    files.forEach(file => {
+      payload.append('attachments[]', file);
+    });
     payload.append('private', isPrivate);
     payload.append('echo_id', echoId);
     payload.append('cc_emails', ccEmails);

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

@@ -7,7 +7,7 @@
     >
       <div class="thumb-wrap">
         <img
-          v-if="isTypeImage(attachment.resource.type)"
+          v-if="isTypeImage(attachment.resource.content_type)"
           class="image-thumb"
           :src="attachment.thumb"
         />
@@ -15,12 +15,12 @@
       </div>
       <div class="file-name-wrap">
         <span class="item">
-          {{ attachment.resource.name }}
+          {{ attachment.resource.filename }}
         </span>
       </div>
       <div class="file-size-wrap">
         <span class="item">
-          {{ formatFileSize(attachment.resource.size) }}
+          {{ formatFileSize(attachment.resource.byte_size) }}
         </span>
       </div>
       <div class="remove-file-wrap">

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

@@ -19,7 +19,8 @@
         :multiple="enableMultipleFileUpload"
         :drop="true"
         :drop-directory="false"
-        @input-file="onFileUpload"
+        :data="{ direct_upload_url: '/rails/active_storage/direct_uploads', direct_upload: true }"
+        @input-file="onDirectFileUpload"
       >
         <woot-button
           v-if="showAttachButton"
@@ -80,6 +81,7 @@
 
 <script>
 import FileUpload from 'vue-upload-component';
+import * as ActiveStorage from "activestorage";
 import {
   hasPressedAltAndWKey,
   hasPressedAltAndAKey,
@@ -109,7 +111,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    onFileUpload: {
+    onDirectFileUpload: {
       type: Function,
       default: () => {},
     },
@@ -150,6 +152,9 @@ export default {
       default: true,
     },
   },
+  mounted() {
+    ActiveStorage.start();
+  },
   computed: {
     isNote() {
       return this.mode === REPLY_EDITOR_MODES.NOTE;

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

@@ -61,7 +61,7 @@
     <reply-bottom-panel
       :mode="replyType"
       :send-button-text="replyButtonLabel"
-      :on-file-upload="onFileUpload"
+      :on-direct-file-upload="onDirectFileUpload"
       :show-file-upload="showFileUpload"
       :toggle-emoji-picker="toggleEmojiPicker"
       :show-emoji-picker="showEmojiPicker"
@@ -104,6 +104,7 @@ import {
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { DirectUpload } from 'activestorage';
 
 export default {
   components: {
@@ -443,6 +444,35 @@ export default {
         isPrivate,
       });
     },
+    onDirectFileUpload(file) {
+      if (!file) {
+        return;
+      }
+      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+        const upload = new DirectUpload(file.file, '/rails/active_storage/direct_uploads', null, file.file.name);
+        upload.create((error, blob) => {
+          if (error) {
+            this.showAlert(
+              error
+            );
+          } else {
+            this.attachedFiles.push({
+              currentChatId: this.currentChat.id,
+              resource: blob,
+              isPrivate: this.isPrivate,
+              thumb: null,
+              blobSignedId: blob.signed_id,
+            });
+          }
+        });
+      } else {
+        this.showAlert(
+          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
+            MAXIMUM_FILE_UPLOAD_SIZE,
+          })
+        );
+      }
+    },
     onFileUpload(file) {
       if (!file) {
         return;
@@ -486,7 +516,7 @@ export default {
       if (this.attachedFiles && this.attachedFiles.length) {
         messagePayload.files = [];
         this.attachedFiles.forEach(attachment => {
-          messagePayload.files.push(attachment.resource.file);
+          messagePayload.files.push(attachment.blobSignedId);
         });
       }
 

app/javascript/widget/api/endPoints.js

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

app/javascript/widget/components/ChatAttachment.vue

@@ -2,7 +2,8 @@
   <file-upload
     :size="4096 * 2048"
     :accept="allowedFileTypes"
-    @input-file="onFileUpload"
+    :data="{ direct_upload_url: '', direct_upload: true }"
+    @input-file="onDirectFileUpload"
   >
     <button class="icon-button flex items-center justify-center">
       <fluent-icon v-if="!isUploading.image" icon="attach" />
@@ -21,6 +22,8 @@ import {
 } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { DirectUpload } from 'activestorage';
+
 export default {
   components: { FluentIcon, FileUpload, Spinner },
   props: {
@@ -44,6 +47,39 @@ export default {
     getFileType(fileType) {
       return fileType.includes('image') ? 'image' : 'file';
     },
+    async onDirectFileUpload(file) {
+      if (!file) {
+        return;
+      }
+      this.isUploading = true;
+      try {
+        if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+          const upload = new DirectUpload(file.file, '/rails/active_storage/direct_uploads', null, file.file.name);
+
+          upload.create((error, blob) => {
+            if (error) {
+              window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+                message: error,
+              });
+            } else {
+              this.onAttach({
+                fileType: blob.content_type,
+                file: blob.signed_id
+              });
+            }
+          });
+        } else {
+          window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('FILE_SIZE_LIMIT', {
+              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
+            }),
+          });
+        }
+      } catch (error) {
+        // Error
+      }
+      this.isUploading = false;
+    },
     async onFileUpload(file) {
       if (!file) {
         return;

package.json

@@ -24,6 +24,7 @@
     "@rails/webpacker": "5.3.0",
     "@sentry/tracing": "^6.4.1",
     "@sentry/vue": "^6.4.1",
+    "activestorage": "^5.2.6",
     "axios": "^0.21.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",