From 26e87554387774181d868621f9177353309a9e74 Mon Sep 17 00:00:00 2001
From: Cyrille Bollu <cyrpub@bollu.be>
Date: Tue, 23 Jul 2019 17:14:03 +0200
Subject: [PATCH] PoC: Upload images in Composer

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>
---
 src/components/Composer.vue | 40 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 425d06ef..40539798 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -81,11 +81,12 @@
 
                         <masonry>
                                 <div v-for="(item, index) in postAttachments" :key="index">
-                                        <img src="">
+                                        <img :src="item">
                                 </div>
                         </masonry>
 
 			<div class="options">
+				<input ref="addAttach" class="emoji-invoker" type="file" @change="uploadImages" />
 				<input :value="currentVisibilityPostLabel" :disabled="post.length < 1" class="submit primary"
 					type="submit" title="" data-original-title="Post">
 				<div v-click-outside="hidePopoverMenu">
@@ -239,6 +240,12 @@
 	.popovermenu {
 		top: 55px;
 	}
+
+	.attachment-picker-wrapper {
+		position: absolute;
+		right: 0;
+		top: 2;
+	}
 </style>
 <style>
 	/* Tribute-specific styles TODO: properly scope component css */
@@ -559,6 +566,37 @@ export default {
 		})
 	},
 	methods: {
+		uploadImages() {
+			var self = this
+			let file = this.$refs.addAttach.files[0];
+			let reader = new FileReader()
+			reader.onload = function(e) {
+				var canvas = document.createElement('canvas')
+				var ctx = canvas.getContext('2d');
+				var width  = 300
+				var height = 200
+				var img = new Image()
+	                        img.onload = function() {
+		                	var imgWidth = img.width
+         	      		        var imgHeight = img.height
+                       		        if (imgWidth > window.innerWidth) {
+	                                	imgHeight = imgHeight * (width / imgWidth)
+                                        	imgWidth = width
+                                	}
+	                                if (imgHeight > height) {
+        	                                imgWidth = imgWidth * (height / imgHeight)
+               	        	                imgHeight = height
+                	                }
+	                                canvas.width = imgWidth
+	                                canvas.height = imgHeight
+	                                ctx.drawImage(img, 0, 0, imgWidth, imgHeight)
+					var resizedImg = canvas.toDataURL()
+					self.postAttachments.push(resizedImg)
+                        	}
+				img.src = e.target.result
+			}
+			reader.readAsDataURL(file)
+		},
 		insert(emoji) {
 			if (typeof emoji === 'object') {
 				let category = Object.keys(emoji)[0]