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

@@ -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,
       }),

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

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() {

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) {
+      if (this.attachedFiles && this.attachedFiles.length) {
-        messagePayload.file = attachment.resource.file;
+        messagePayload.files = [];
+        this.attachedFiles.forEach(attachment => {
+          messagePayload.files.push(attachment.resource.file);
+        });
       }
 
       if (this.ccEmails) {