feat: Activestorage direct upload (#3768)

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);
         });
       }