Feature: Send attachments to widget user (#621)

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

@@ -23,6 +23,17 @@
         @click="onClick()"
         @blur="onBlur()"
       />
+      <file-upload
+        v-if="!showFileUpload"
+        accept="image/*"
+        @input-file="onFileUpload"
+      >
+        <i
+          v-if="!isUploading.image"
+          class="icon ion-android-attach attachment"
+        />
+        <woot-spinner v-if="isUploading.image" />
+      </file-upload>
       <i
         class="icon ion-happy-outline"
         :class="{ active: showEmojiPicker }"
@@ -77,6 +88,7 @@
 import { mapGetters } from 'vuex';
 import emojione from 'emojione';
 import { mixin as clickaway } from 'vue-clickaway';
+import FileUpload from 'vue-upload-component';
 
 import EmojiInput from '../emoji/EmojiInput';
 import CannedResponse from './CannedResponse';
@@ -85,6 +97,7 @@ export default {
   components: {
     EmojiInput,
     CannedResponse,
+    FileUpload,
   },
   mixins: [clickaway],
   data() {
@@ -92,7 +105,13 @@ export default {
       message: '',
       isPrivate: false,
       showEmojiPicker: false,
+      showFileUpload: false,
       showCannedResponsesList: false,
+      isUploading: {
+        audio: false,
+        video: false,
+        image: false,
+      },
     };
   },
   computed: {
@@ -180,21 +199,21 @@ export default {
     isEscape(e) {
       return e.keyCode === 27; // ESCAPE
     },
-    sendMessage() {
+    async sendMessage() {
       const isMessageEmpty = !this.message.replace(/\n/g, '').length;
-      if (isMessageEmpty) {
-        return;
-      }
+      if (isMessageEmpty) return;
+
       if (!this.showCannedResponsesList) {
-        this.$store
-          .dispatch('sendMessage', {
+        try {
+          await this.$store.dispatch('sendMessage', {
             conversationId: this.currentChat.id,
             message: this.message,
             private: this.isPrivate,
-          })
-          .then(() => {
-            this.$emit('scrollToMessage');
           });
+          this.$emit('scrollToMessage');
+        } catch (error) {
+          // Error
+        }
         this.clearMessage();
         this.hideEmojiPicker();
       }
@@ -272,6 +291,26 @@ export default {
         : 'CONVERSATION.FOOTER.MSG_INPUT';
       return placeHolder;
     },
+
+    onFileUpload(file) {
+      this.isUploading.image = true;
+      this.$store
+        .dispatch('sendAttachment', [
+          this.currentChat.id,
+          {
+            file_type: file.type,
+            file: file.file,
+          },
+        ])
+        .then(() => {
+          this.isUploading.image = false;
+          this.$emit('scrollToMessage');
+        })
+        .catch(() => {
+          this.isUploading.image = false;
+          this.$emit('scrollToMessage');
+        });
+    },
   },
 };
 </script>