1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/notes/components/note_attachment.vue b/app/assets/javascripts/notes/components/note_attachment.vue
index 618b807b9cc..f057ad22ea1 100644
--- a/app/assets/javascripts/notes/components/note_attachment.vue
+++ b/app/assets/javascripts/notes/components/note_attachment.vue
@@ -1,12 +1,48 @@
 <script>
+  import axios from '~/lib/utils/axios_utils';
+  import Modal from '~/vue_shared/components/modal.vue';
+
   export default {
     name: 'NoteAttachment',
+    components: {
+      Modal,
+    },
     props: {
       attachment: {
         type: Object,
         required: true,
       },
+      deleteAttachmentPath: {
+        type: String,
+        required: true,
+      },
     },
+    data() {
+      return {
+        showModal: false,
+        loading: false,
+      };
+    },
+    methods: {
+      removeAttachment() {
+        this.loading = true;
+
+        axios({
+          url: this.deleteAttachmentPath,
+          method: 'delete',
+        })
+          .then((res) => {
+            this.showModal = false;
+            this.loading = false;
+            this.$emit('disableEditing');
+          })
+          .catch((err) => {
+            this.loading = false;
+            throw err;
+          });
+
+      }
+    }
   };
 </script>
 
@@ -34,6 +70,23 @@
         </i>
         {{ attachment.filename }}
       </a>
+      <button
+        type="button"
+        class="btn btn-transparent"
+        title="Delete this attachment"
+        @click.prevent="showModal = true"
+      >
+        <i class="fa fa-trash-o cred" />
+      </button>
+      <modal
+        v-if="showModal"
+        kind="danger"
+        text="Are you sure you want to remove the attachment?"
+        primary-button-label="Remove attachment"
+        :submitDisabled="loading"
+        @submit="removeAttachment"
+        @cancel="showModal = false"
+      />
     </div>
   </div>
 </template>