From b34e41f65cd388d6454936cf281f8b17adcab65e Mon Sep 17 00:00:00 2001
From: Harvey Kandola <harvey@documize.com>
Date: Wed, 6 Jun 2018 16:53:31 +0100
Subject: [PATCH] Image upload for WYSIWYG editor

Fixes #106
---
 .../components/section/wysiwyg/type-editor.js |   7 +-
 .../tinymce/plugins/uploadimage/img/icon.png  | Bin 0 -> 319 bytes
 .../tinymce/plugins/uploadimage/plugin.js     |  97 ++++++++++++++++++
 .../tinymce/plugins/uploadimage/plugin.min.js |   1 +
 4 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100755 gui/public/tinymce/plugins/uploadimage/img/icon.png
 create mode 100755 gui/public/tinymce/plugins/uploadimage/plugin.js
 create mode 100755 gui/public/tinymce/plugins/uploadimage/plugin.min.js

diff --git a/gui/app/components/section/wysiwyg/type-editor.js b/gui/app/components/section/wysiwyg/type-editor.js
index 5c8ef916..e6e53df2 100644
--- a/gui/app/components/section/wysiwyg/type-editor.js
+++ b/gui/app/components/section/wysiwyg/type-editor.js
@@ -42,6 +42,9 @@ export default Component.extend({
 				statusbar: false,
 				inline: true,
 				paste_data_images: true,
+				images_upload_handler: function (blobInfo, success, failure) { // eslint-disable-line no-unused-vars
+					success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
+				},
 				image_advtab: true,
 				image_caption: true,
 				media_live_embeds: true,
@@ -98,14 +101,14 @@ export default Component.extend({
 					'advlist autolink lists link image charmap print hr anchor pagebreak',
 					'searchreplace wordcount visualblocks visualchars code codesample fullscreen',
 					'insertdatetime media nonbreaking save table directionality',
-					'template paste textcolor colorpicker textpattern imagetools'
+					'template paste textcolor colorpicker textpattern imagetools uploadimage'
 				],
 				menu: {},
 				menubar: false,
 				toolbar1:
 					'formatselect fontsizeselect | bold italic underline strikethrough superscript subscript | forecolor backcolor link unlink',
 				toolbar2:
-					'outdent indent bullist numlist | alignleft aligncenter alignright alignjustify | table image media codesample',
+					'outdent indent bullist numlist | alignleft aligncenter alignright alignjustify | table uploadimage image media codesample',
 				save_onsavecallback: function () {
 					Mousetrap.trigger('ctrl+s');
 				}
diff --git a/gui/public/tinymce/plugins/uploadimage/img/icon.png b/gui/public/tinymce/plugins/uploadimage/img/icon.png
new file mode 100755
index 0000000000000000000000000000000000000000..d015cc81302aa51dabd4dbe80f46700ed4a77abf
GIT binary patch
literal 319
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbK}Y=BRQt9yaZ%9SgPjg9~R{|_YL
z3<%fV-F?@tT_z?bv9Ym0k@E6#h#Cla<HijjqoSe$q8La*7~8jRx3RIAI(6!=mbleG
zi=;||{DK+Uqh{@IZLy8|@z1y6*O&d0Pmi+6&w9a@vfuUNPamMFa!(h>5Q)pBeeObs
z90ZQAoO|HFr#$<={p9BI)n^#*Mwy!4WpH@hr@MS}`(w3u{Z|Fi&8K3o9uH<!Zb~Za
z)8JrcPI!NZ>5sU}meBCji+dQXrdxGxy3Kg?lVteC9p_dZF9}@5Tswch*{W|=s)4g+
i2A#Gx+S<7Ph<GJ0-?z30hyDYdz~JfX=d#Wzp$Pz_v4&#+

literal 0
HcmV?d00001

diff --git a/gui/public/tinymce/plugins/uploadimage/plugin.js b/gui/public/tinymce/plugins/uploadimage/plugin.js
new file mode 100755
index 00000000..0dac9d96
--- /dev/null
+++ b/gui/public/tinymce/plugins/uploadimage/plugin.js
@@ -0,0 +1,97 @@
+(function() {
+	tinymce.create('tinymce.plugins.UploadImagePlugin', {
+		init: function(ed, url) {
+			// Register commands
+			ed.addCommand('mceUploadImage', function() {
+
+				var displayImage = function( base64 ) {
+					if ( ! base64 ) {
+						return false;
+					}
+
+					var tpl = '<img src="%s" />';
+
+					ed.insertContent(tpl.replace('%s', base64));
+
+					ed.focus();
+
+					ed.windowManager.close();
+				};
+
+
+				/**
+				 * Load Image file (from input)
+				 * and get the base64 encoded image data.
+				 *
+				 * @link http://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form
+				 *
+				 * @param  {String}   input    Input ID.
+				 * @param  {Function} callback Callback function to call when file has loaded to send it the base64.
+				 *
+				 * @return {Function}          The callback function result.
+				 */
+				var getBase64FromInput = function( input, callback ) {
+
+					var filesSelected = document.getElementById( input ).files;
+
+					if ( filesSelected.length > 0 )
+					{
+						var fileToLoad = filesSelected[0],
+							fileReader = new FileReader();
+
+						fileReader.readAsDataURL(fileToLoad);
+
+						fileReader.onload = function(fileLoadedEvent) {
+
+							return callback( fileLoadedEvent.target.result );
+						};
+					}
+					else
+					{
+						return callback( false );
+					}
+				};
+
+				ed.windowManager.open({
+					title:'Upload Image',
+					body:[{
+						type:"container",
+						html: '<form action="" method="POST" enctype="multipart/form-data">' +
+							'<div class="mce-container" hidefocus="1" tabindex="-1">' +
+								'<div class="mce-container-body">' +
+									'<label>Select a file<br />' +
+									'<input type="file" name="file" id="upload-image" accept="image/*" class="mce-textbox mce-placeholder" hidefocus="true">' +
+								'</label></div>' +
+							'</div>' +
+						'</form>'
+					}],
+					onSubmit: function(){
+
+						getBase64FromInput( 'upload-image', displayImage );
+
+						return false;
+					}
+				});
+			});
+
+			// Register buttons
+			ed.addButton('uploadimage', {
+				title : 'Upload Image',
+				cmd : 'mceUploadImage',
+				image : url + '/img/icon.png'
+			});
+		},
+		getInfo: function() {
+			return {
+				longname : 'Upload Image',
+				author : 'François Jacquet',
+				authorurl : 'https://github.com/francoisjacquet/tinymce-uploadimage',
+				infourl : 'https://github.com/francoisjacquet/tinymce-uploadimage/blob/master/README.md',
+				version : '0.1'
+			};
+		}
+	});
+
+	tinymce.PluginManager.add('uploadimage', tinymce.plugins.UploadImagePlugin);
+})();
+
diff --git a/gui/public/tinymce/plugins/uploadimage/plugin.min.js b/gui/public/tinymce/plugins/uploadimage/plugin.min.js
new file mode 100755
index 00000000..70ed11b2
--- /dev/null
+++ b/gui/public/tinymce/plugins/uploadimage/plugin.min.js
@@ -0,0 +1 @@
+(function(){tinymce.create('tinymce.plugins.UploadImagePlugin',{init:function(ed,url){ed.addCommand('mceUploadImage',function(){var displayImage=function(base64){if(!base64){return false}var tpl='<img src="%s" />';ed.insertContent(tpl.replace('%s',base64));ed.focus();ed.windowManager.close()};var getBase64FromInput=function(input,callback){var filesSelected=document.getElementById(input).files;if(filesSelected.length>0){var fileToLoad=filesSelected[0],fileReader=new FileReader();fileReader.readAsDataURL(fileToLoad);fileReader.onload=function(fileLoadedEvent){return callback(fileLoadedEvent.target.result)}}else{return callback(false)}};ed.windowManager.open({title:'Upload Image',body:[{type:"container",html:'<form action="" method="POST" enctype="multipart/form-data"><div class="mce-container" hidefocus="1" tabindex="-1"><div class="mce-container-body"><label>Select a file<br /><input type="file" name="file" id="upload-image" accept="image/*" class="mce-textbox mce-placeholder" hidefocus="true"></label></div></div></form>'}],onSubmit:function(){getBase64FromInput('upload-image',displayImage);return false}})});ed.addButton('uploadimage',{title:'Upload Image',cmd:'mceUploadImage',image:url+'/img/icon.png'})},getInfo:function(){return{longname:'Upload Image',author:'François Jacquet',authorurl:'https://github.com/francoisjacquet/tinymce-uploadimage',infourl:'https://github.com/francoisjacquet/tinymce-uploadimage/blob/master/README.md',version:'0.1'}}});tinymce.PluginManager.add('uploadimage',tinymce.plugins.UploadImagePlugin)})();