fix: Add Attachment endpoint to save file against automation rule (#4480)

Co-authored-by: fayazara <fayazara@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -52,6 +52,11 @@
             class="answer--text-input"
             placeholder="Enter url"
           />
+          <automation-action-file-input
+            v-if="inputType === 'attachment'"
+            v-model="action_params"
+            :initial-file-name="initialFileName"
+          />
         </div>
       </div>
       <woot-button
@@ -84,9 +89,11 @@
 
 <script>
 import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
+import AutomationActionFileInput from './AutomationFileInput.vue';
 export default {
   components: {
     AutomationActionTeamMessageInput,
+    AutomationActionFileInput,
   },
   props: {
     value: {
@@ -109,6 +116,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    initialFileName: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     action_name: {
@@ -187,6 +198,7 @@ export default {
 .filter__answer--wrap {
   margin-right: var(--space-smaller);
   flex-grow: 1;
+  max-width: 50%;
 
   input {
     margin-bottom: 0;

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

@@ -0,0 +1,117 @@
+<template>
+  <label class="input-wrapper" :class="uploadState">
+    <input
+      v-if="uploadState !== 'processing'"
+      type="file"
+      name="attachment"
+      :class="uploadState === 'processing' ? 'disabled' : ''"
+      @change="onChangeFile"
+    />
+    <spinner v-if="uploadState === 'processing'" />
+    <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
+    <fluent-icon
+      v-if="uploadState === 'uploaded'"
+      icon="checkmark-circle"
+      type="outline"
+      class="success-icon"
+    />
+    <fluent-icon
+      v-if="uploadState === 'failed'"
+      icon="dismiss-circle"
+      type="outline"
+      class="error-icon"
+    />
+    <p class="file-button">{{ label }}</p>
+  </label>
+</template>
+
+<script>
+import Spinner from 'shared/components/Spinner';
+import alertMixin from 'shared/mixins/alertMixin';
+export default {
+  components: {
+    Spinner,
+  },
+  mixins: [alertMixin],
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    initialFileName: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      uploadState: 'idle',
+      label: this.$t('AUTOMATION.ATTACHMENT.LABEL_IDLE'),
+    };
+  },
+  mounted() {
+    if (this.initialFileName) {
+      this.label = this.initialFileName;
+      this.uploadState = 'uploaded';
+    }
+  },
+  methods: {
+    async onChangeFile(event) {
+      this.uploadState = 'processing';
+      this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADING');
+      try {
+        const file = event.target.files[0];
+        const formData = new FormData();
+        formData.append('attachment', file, file.name);
+        const id = await this.$store.dispatch(
+          'automations/uploadAttachment',
+          formData
+        );
+        this.$emit('input', [id]);
+        this.uploadState = 'uploaded';
+        this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADED');
+      } catch (error) {
+        this.uploadState = 'failed';
+        this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOAD_FAILED');
+        this.showAlert(this.$t('AUTOMATION.ATTACHMENT.UPLOAD_ERROR'));
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+input[type='file'] {
+  display: none;
+}
+.input-wrapper {
+  display: flex;
+  height: 39px;
+  background-color: var(--white);
+  border-radius: var(--border-radius-small);
+  border: 1px dashed var(--w-100);
+  padding: var(--space-smaller) var(--space-small);
+  align-items: center;
+  font-size: var(--font-size-mini);
+  cursor: pointer;
+}
+.success-icon {
+  margin-right: var(--space-small);
+  color: var(--g-500);
+}
+.error-icon {
+  margin-right: var(--space-small);
+  color: var(--r-500);
+}
+
+.processing {
+  cursor: not-allowed;
+  opacity: 0.9;
+}
+.file-button {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+</style>