How to support copy / paste of pictures on Service Portal using IE11

[Christian Penoy]

Pre-requisite to this article

In order to understand this article, I recommend you read fully and carefully lasse's article How to support copy / paste of pictures on Service Portal as well as the Script Include "XXX_Attachment" in the project Copy paste screenshot as attachment to any incident (or task).

The old question

This question has been in all the forums for some time: how can I paste an image in the Service Portal using this bloody old IE11 ?

The problem

The solution given by lasse's great article is great if you/your client works under a decent/recent web browser such as Chrome, however this solution does not work with IE11. As of 2019, it seems that this browser will have a lifespan as long as Cobol has.

The root cause of the problem lies in IE11 itself: it will not fire the paste event if the clipboard contains an image. So any attribute like 'onpaste="myFunction()"' or 'ng-paste="myFunction()"' will not work as the event will not fire. Any trick like 'document.getElementById("pasteArea").addEventListener('paste', pasteAttachmentIE, false);' won't do better. It seems that Microsoft turned our journey into a paste hell on purpose. It won't just paste an image.

A solution (and a light in the IE darkness)

In fact the solution is written in the project Copy paste screenshot as attachment to any incident (or task). Create a container with the attribute contenteditable='true' :

<div ng-non-bindable="true" id='pasteArea' class="form-control" style="background-color: AliceBlue; display:block; overflow: hidden;" contenteditable='true'>Paste your screenshot here...</div>

I wonder if this is a bug or a forgotten feature in IE11, but now we can catch the paste event.

How to Paste in the Ticket Conversation Portal Widget

Given what we know now, we can customize the Ticket Conversation Widget.

HTML Template

First, locate this line at the top of the html template: 

<div ng-if="data.canRead && !data.isNewRecord" class="panel panel-{{options.color}} b ticket_conversation" >

add the paste event:

<div ng-if="data.canRead && !data.isNewRecord" class="panel panel-{{options.color}} b ticket_conversation"  ng-paste="paste($event)" >

Then change the text area(id="post-input") into a content editable DIV:

<div id="post-input"
                      ng-keypress="keyPress($event)"
                      sn-resize-height="trim"
                      rows="1" 
                      class="form-control no-resize overflow-hidden"
                      ng-model='data.journalEntry'
                      ng-model-options='{debounce: 250}'
                      ng-attr-placeholder="{{getPlaceholder()}}"
                      aria-label="{{getPlaceholder()}}"
                      autocomplete="off"
                      ng-change="userTyping(data.journalEntry)"
                 			contenteditable="true"
                />

Client script

Add the following code to the main function:

	$scope.pasteIE = function (event) {
		event.preventDefault(); // prevent image from displaying in the paste area
		if(typeof window.clipboardData != 'undefined') {
			var clip = window.clipboardData;
			if (clip) {
				if(clip.files.length == 0){
					pastedNotImage();
				} else if ( clip.files[0].type.indexOf('image/') !== -1) {
					var myFile = clip.files[0];
					var reader = new window.FileReader();
					reader.onloadend = function() {
						var base64Image = reader.result;
						attachClipboardData(base64Image);
					};
					reader.readAsDataURL(myFile);
				} else {
					pastedNotImage();
				}
			}
		}
	
	}	
	
function pastedNotImage(){
	alert(c.data.notImageText);
}
	
function attachClipboardData(data) { // date is 'date:image/png;base64,...'
	
	var temp = data.toString().replace(/data:/g,'').split(';');
	var contentType = temp[0];
	var fileName = 'Screenshot';
	var fileType = contentType.split('/')[1];
	var content = temp[1].toString().replace(/base64,/g,'');
	c.data.action = "attachScreenshot";
	c.data.attachment_contentType = contentType;
	c.data.attachment_fileName = fileName;
	c.data.attachment_fileType = fileType;
	c.data.attachment_content = content;
	c.server.update().then(function(){
			c.data.action = undefined;		
			$rootScope.$broadcast("sp.attachments.update", $scope.data.sys_id);
			spAriaUtil.sendLiveMessage($scope.data.attachAddedMsg);
	});
}

Note that the nowAttachmentHandler can't be used as the object in the clipboard is not compatible with it. So you have to save the image by yourself.

Server script

Add the following code after the input test:

if (input.action == "attachScreenshot") {
	var value = GlideStringUtil.base64DecodeAsBytes(input.attachment_content);	
	var attachment = new XXX_Attachment(); // this is Attachment class from lasse's article
	var name = input.attachment_fileName + " " + gs.nowDateTime() + "." + input.attachment_fileType;
	gs.log('Creating attachment with data.table='+data.table+', data.sys_id='+data.sys_id+
				', name='+name+', input.attachment_contentType='+input.attachment_contentType);
	var attID = attachment.write(data.table, data.sys_id, name, input.attachment_contentType, value);
	gs.log("Created sys_attachment with id "+attID);
}

Save your Widget and place it on your page

Now you can test and enjoy pasting screenshots directly in the text input area of the Ticket Conversation Widget!