From 8cff690640d75759c3ce2b0ace4bb566d23642a8 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 25 Jan 2022 08:16:58 +0530
Subject: [PATCH] feat: Support multiple file upload on dashboard (#3748)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 app/javascript/dashboard/api/inbox/message.js        | 12 +++++++-----
 .../dashboard/api/specs/inbox/message.spec.js        |  2 +-
 .../widgets/WootWriter/ReplyBottomPanel.vue          |  5 +++++
 .../components/widgets/conversation/ReplyBox.vue     | 12 +++++++++---
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/api/inbox/message.js b/app/javascript/dashboard/api/inbox/message.js
index bfea9a2b9..22f417052 100644
--- a/app/javascript/dashboard/api/inbox/message.js
+++ b/app/javascript/dashboard/api/inbox/message.js
@@ -7,14 +7,16 @@ export const buildCreatePayload = ({
   isPrivate,
   contentAttributes,
   echoId,
-  file,
+  files,
   ccEmails = '',
   bccEmails = '',
 }) => {
   let payload;
-  if (file) {
+  if (files && files.length !== 0) {
     payload = new FormData();
-    payload.append('attachments[]', file, file.name);
+    files.forEach(file => {
+      payload.append('attachments[]', file, file.name);
+    });
     if (message) {
       payload.append('content', message);
     }
@@ -46,7 +48,7 @@ class MessageApi extends ApiClient {
     private: isPrivate,
     contentAttributes,
     echo_id: echoId,
-    file,
+    files,
     ccEmails = '',
     bccEmails = '',
   }) {
@@ -58,7 +60,7 @@ class MessageApi extends ApiClient {
         isPrivate,
         contentAttributes,
         echoId,
-        file,
+        files,
         ccEmails,
         bccEmails,
       }),
diff --git a/app/javascript/dashboard/api/specs/inbox/message.spec.js b/app/javascript/dashboard/api/specs/inbox/message.spec.js
index dd9cba850..6953621cb 100644
--- a/app/javascript/dashboard/api/specs/inbox/message.spec.js
+++ b/app/javascript/dashboard/api/specs/inbox/message.spec.js
@@ -36,7 +36,7 @@ describe('#ConversationAPI', () => {
         echoId: 12,
         isPrivate: true,
 
-        file: new Blob(['test-content'], { type: 'application/pdf' }),
+        files: [new Blob(['test-content'], { type: 'application/pdf' })],
       });
       expect(formPayload).toBeInstanceOf(FormData);
       expect(formPayload.get('content')).toEqual('test content');
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 594aaa6aa..0a9ee3629 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -16,6 +16,7 @@
         ref="upload"
         :size="4096 * 4096"
         :accept="allowedFileTypes"
+        :multiple="enableMultipleFileUpload"
         :drop="true"
         :drop-directory="false"
         @input-file="onFileUpload"
@@ -144,6 +145,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    enableMultipleFileUpload: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     isNote() {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 83c209f8e..d7385a3fd 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -72,6 +72,7 @@
       :is-format-mode="showRichContentEditor"
       :enable-rich-editor="isRichEditorEnabled"
       :enter-to-send-enabled="enterToSendEnabled"
+      :enable-multiple-file-upload="enableMultipleFileUpload"
       @toggleEnterToSend="toggleEnterToSend"
     />
   </div>
@@ -283,6 +284,9 @@ export default {
     showReplyHead() {
       return !this.isOnPrivateNote && this.isAnEmailChannel;
     },
+    enableMultipleFileUpload() {
+      return this.isAnEmailChannel || this.isAWebWidgetInbox || this.isAPIInbox;
+    },
   },
   watch: {
     currentChat(conversation) {
@@ -469,7 +473,6 @@ export default {
       );
     },
     getMessagePayload(message) {
-      const [attachment] = this.attachedFiles;
       const messagePayload = {
         conversationId: this.currentChat.id,
         message,
@@ -480,8 +483,11 @@ export default {
         messagePayload.contentAttributes = { in_reply_to: this.inReplyTo };
       }
 
-      if (attachment) {
-        messagePayload.file = attachment.resource.file;
+      if (this.attachedFiles && this.attachedFiles.length) {
+        messagePayload.files = [];
+        this.attachedFiles.forEach(attachment => {
+          messagePayload.files.push(attachment.resource.file);
+        });
       }
 
       if (this.ccEmails) {