Work on attachments in MessageComposer

apimail/static/apimail/assets/vue/components/AttachmentListEditable.vue

+<template>
+  <b-row>
+    <b-col class="col-lg-6">
+      <b-form-file
+	multiple
+	v-model="attachments"
+	placeholder="Select a file, or drop it here"
+	drop-placeholder="Drop file here"
+	>
+      </b-form-file>
+    </b-col>
+    <b-col class="col-lg-6">
+      <h3>Attachments:</h3>
+      <ul>
+	<li
+	  is="attachment-list-item"
+	  v-for="(attachment, index) in attachments"
+	  :key="'att-' + index"
+	  :attachment="attachment"
+	  @remove="attachments.splice(index, 1)"
+	  >
+	</li>
+      </ul>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+
+  import AttachmentListItem from './AttachmentListItem.vue'
+
+  export default {
+  name: "attachment-list-editable",
+  components: {
+  AttachmentListItem,
+  },
+  props: {
+  attachments: {
+  type: Array,
+  required: true,
+  }
+  }
+  }
+
+</script>

apimail/static/apimail/assets/vue/components/AttachmentListItem.vue

+<template>
+  <li>
+    {{ attachment.name }}&emsp;({{ attachment.type}}, {{ attachment.size }} bytes)
+    <b-button class="bg-danger p-1" size="sm" @click.stop="$emit('remove')">
+      <i class="small fa fa-times text-white"></i>
+    </b-button>
+  </li>
+</template>
+
+<script>
+  export default {
+  name: "attachment-list-item",
+  props: {
+  attachment: {
+  type: File,
+  required: true,
+  }
+  },
+  }
+</script>

apimail/static/apimail/assets/vue/components/MessageComposer.vue

@@ -59,6 +59,13 @@
 	</b-form-group>
       </b-col>
     </b-row>
+    <b-form-group
+      id="attachments"
+      label="attachments:"
+      class="mb-4"
+      >
+      <attachment-list-editable :attachments="form.attachments"></attachment-list-editable>
+    </b-form-group>
     <b-form-group
       id="subject"
       label="Subject:"
@@ -136,12 +143,14 @@
 import Cookies from 'js-cookie'
 
 import EmailListEditable from './EmailListEditable.vue'
+import AttachmentListEditable from './AttachmentListEditable.vue'
 
 var csrftoken = Cookies.get('csrftoken');
 
 export default {
     name: "message-composer",
     components: {
+	AttachmentListEditable,
 	EmailListEditable,
     },
     props: {
@@ -168,9 +177,11 @@ export default {
 		subject: '',
 		body: '',
 		sanitized_body_html: '',
+		attachments: [],
 	    },
 	    newcc: '',
 	    newbcc: '',
+	    newattachment: null,
 	    from_account_accesses: [],
 	    response: null,
 	    response_body_json: null,