paste images/files as attachment

src/components/eventContent.vue

@@ -52,6 +52,10 @@ export default {
     compact: {
       type: Boolean,
       default: false
+    },
+    onUpdate: {
+      type: Function,
+      default: ()=>{}
     }
   },
   methods: {
@@ -59,6 +63,9 @@ export default {
       return url.includes('mxc')?getMediaUrl(url):url;
     },
     parseMessage
+  },
+  updated() {
+    this.onUpdate();
   }
 }
 </script>

src/components/fileUpload.vue

@@ -15,6 +15,7 @@
 
 <script>
 import icon from '@/components/icon';
+import {readFileBlob} from '@/lib/readFileBlob';
 
 export default {
   name: 'soundRecorder',
@@ -26,21 +27,11 @@ export default {
   },
   methods: {
     setFile({file}){
-      this.readFile(file).then(blob => {
+      readFileBlob(file).then(blob => {
         blob.name = file.name;
         this.onChange({blob})
       });
-    },
-    readFile(file){
-      return new Promise(resolve => {
-        let reader = new FileReader();
-        reader.onerror = console.error;
-        reader.onload = async event => {
-          resolve(await (await fetch(event.target.result)).blob());
-        }
-        reader.readAsDataURL(file);
-      });
-    },
+    }
   }
 }
 </script>

src/components/newMessage.vue

@@ -2,7 +2,7 @@
   <div class="newMessageBanner" ref="newMessageBanner">
     <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
     <div v-if="attachment" class="attachment">
-      <event-content :content="attachment" class="attachmentContent" :compact="true"/>
+      <event-content :content="attachment" class="attachmentContent" :compact="true" :onUpdate="resizeMessageBanner()"/>
       <icon
         title="remove"
         class="remove"
@@ -13,6 +13,7 @@
     <textarea
       @keyup.enter.exact="onSubmit(event)"
       @input="resizeMessageBanner(); sendTyping(2000);"
+      @paste="onPaste"
       v-model="event.content.body"
       ref="newMessageInput" class="newMessageInput"
       rows="1" placeholder="type a message ..."
@@ -55,6 +56,7 @@ import {VEmojiPicker} from 'v-emoji-picker';
 import EventContent from '@/components/eventContent';
 import SoundRecorder from '@/components/soundRecorder';
 import FileUpload from '@/components/fileUpload';
+import {readFileBlob} from '@/lib/readFileBlob';
 
 export default {
   name: 'newMessage',
@@ -154,6 +156,12 @@ export default {
         'video': 'm.video'
       }[fileType.split('/', 1)[0]] || 'm.file';
     },
+    onPaste(event){
+      let item = (event.clipboardData || event.originalEvent.clipboardData).items[0];
+      if (item.kind !== 'file') return false;
+      let file = item.getAsFile();
+      return readFileBlob(file).then(blob => this.setAttachment({blob, file}));
+    },
     parseMessage,
     calcUserName
   },

src/lib/readFileBlob.js

@@ -0,0 +1,8 @@
+export function readFileBlob(file){
+  return new Promise(resolve => {
+    let reader = new FileReader();
+    reader.onerror = console.error;
+    reader.onload = async event => resolve(await (await fetch(event.target.result)).blob());
+    reader.readAsDataURL(file);
+  });
+}