add support for pasting images into compose window

marckohlbrugge · Jun 30, 2019 · 90cd04c · 90cd04c
1 parent 4d52759
commit 90cd04c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 13 deletions.
diff --git a/src/compose/compose.html b/src/compose/compose.html
@@ -47,6 +47,7 @@
           @drop.native="drop"
           @dragenter.native="dragenter"
           @dragleave.native="dragleave"
+          @paste.native="paste"
           @select="option => selected = option"
         >
         </b-autocomplete>

diff --git a/src/compose/compose.js b/src/compose/compose.js
@@ -29,6 +29,17 @@ const example = {
     };
   },
   methods: {
+    paste: function(event) {
+      let clipboard_items = event.clipboardData.items;
+
+      for (var i = 0; i < clipboard_items.length; i++) {
+        let item = clipboard_items[i];
+
+        if(item.kind == "file" && item.type.match("^image/")) {
+          this.addAttachment(item.getAsFile(), "Pasted Image");
+        }
+      }
+    },
     dragenter: function(event) {
       console.log('drag enter');
       this.isDragging = true;
@@ -42,18 +53,7 @@ const example = {
       this.dragleave();
 
       for (let file of event.dataTransfer.files) {
-        console.log(file);
-        let path = file.path;
-        let file_copy = {
-          path: file.path,
-          name: file.name,
-          size: file.size,
-          obj: file,
-        };
-        this.attachments.push({
-          file: file_copy,
-          url: URL.createObjectURL(file),
-        });
+        this.addAttachment(file);
       }
 
       return false;
@@ -81,6 +81,34 @@ const example = {
       }
       return true;
     },
+    addAttachment: function(file, file_name = null) {
+      if (file_name) {
+        file_name = [file_name, file.name.split('.').pop()].join('.');
+      }
+
+      let file_copy = {
+        path: file.path,
+        name: file_name || file.name,
+        size: file.size,
+        obj: file,
+      };
+
+      if (file.path) {
+        // Regular file
+        this.attachments.push({ file: file_copy });
+      } else {
+        // Pasted image
+        let _this = this;
+        const reader = new FileReader();
+        reader.onload = function() {
+          _this.attachments.push({
+            file: file_copy,
+            base64: reader.result,
+          });
+        };
+        reader.readAsDataURL(file);
+      }
+    },
     submitForm: function() {
       todoBody.disabled = true;
 

diff --git a/src/wip.js b/src/wip.js
@@ -94,7 +94,23 @@ function uploadFile(presigned_url, file) {
       form.append(field, presigned_url.fields[field]);
     }
 
-    form.append('file', fs.createReadStream(file.file.path));
+    if (file.file.path) {
+      // Actual image on disk
+      form.append('file', fs.createReadStream(file.file.path));
+    } else {
+      // Pasted image
+      var regex = /^data:(.+);base64,(.*)$/;
+      var matches = file.base64.match(regex);
+      var content_type = matches[1];
+      var data = matches[2];
+      var buffer = new Buffer(data, 'base64');
+
+      form.append('file', buffer, {
+        filename: file.file.name,
+        contentType: content_type,
+        knownLength: file.file.size,
+      });
+    }
 
     form.submit(presigned_url.url, function(error, response) {
       response.resume();