Create attachment from javascript after ctrl + v a screenshot

smicloud · ‎10-29-2015

We are trying to create a function so the user can paste a screenshot to a task by pressing ctrl+v. The most important browser to get this working in is IE11. We have created functionality so we can paste the actual image and base64 encode it in the javascript. Now, the problem is that we cannot sort out how to actually create the attachment and save it with the task. Here is how we want it to work:

1. If possible, add the attachment to the task as if we added it using the normal component but by using javascript to access the components function for adding the attachment. This means no saving or reloading of the task. Cannot find any such kind of functionality. Is there any javascript function we can access to fix this? The normal component must use something, is this available to use? Or the function used when dragging a file to the task may also be used if available?

2. In case we cannot solve it as above, the other option we have been looking into is using the SOAP method AttachmentCreator. I see two suggestions we would like to explore: i) Use the normal way of accessing the SOAP API as if it was an external application. However, I am not sure if this is possible, is it? (http://wiki.servicenow.com/index.php?title=AttachmentCreator_SOAP_Web_Service#gsc.tab=0) ii) The other way is if we can access the some include script using GlideAjax to post the attachment (http://wiki.servicenow.com/index.php?title=GlideAjax#gsc.tab=0). Then I guess one has to refresh to get the attachments visible in the attachment list.

3. Any suggestions you may have in addition to this is of course appreciated.

Is it possible to solve and how?

guhann · ‎10-29-2015

Hi Niklas,

Try this small utility. This may be helpful.

1) Create an UI Script with below code.

function addPasteEvent() {

document.onpaste = function (event) {

// use event.originalEvent.clipboard for newer chrome versions

var items = (event.clipboardData || event.originalEvent.clipboardData).items;

// find pasted image among pasted items

var blob = null;

for (var i = 0; i < items.length; i++) {

if (items[i].type.indexOf("image") === 0) {

blob = items[i].getAsFile();

}

// load image if there is a pasted image

if (blob !== null) {

var reader = new FileReader();

reader.onload = function(event) {

console.log(event.target.result); // data url!

attachClipboardData(event.target.result);

};

reader.readAsDataURL(blob);

}

};

}

function attachClipboardData(data){

var recordSysID = g_form.getUniqueValue();

var recordTable = g_form.getTableName();

var temp = data.toString().replace(/data:/g,'').split(';');

var contentType = temp[0];

var fileName = 'Screen shot.'+contentType.split('/')[1];

var content = temp[1].toString().replace(/base64,/g,'');

showLoadingDialog();

var attach = new GlideAjax('<script>'); // Specify the script include name after completing step 2

attach.addParam('sysparm_name','attachScreenshot');

attach.addParam('sysparm_tableName',recordTable);

attach.addParam('sysparm_sys_id',recordSysID);

attach.addParam('sysparm_content_type',contentType);

attach.addParam('sysparm_value',content);

attach.addParam('sysparm_filename',fileName);

attach.getXML(getResponse);

function getResponse(response) {

alert('Screen shot attached to ticket!');

window.location.reload();

}

2) Create a script include with below function in it.

attachScreenshot : function() {

var StringUtil = GlideStringUtil;

var value = StringUtil.base64DecodeAsBytes(this.getParameter('sysparm_value'));

var tableName = this.getParameter('sysparm_tableName');

var sys_id = this.getParameter('sysparm_sys_id');

var filename = this.getParameter('sysparm_filename');

var content_type = this.getParameter('sysparm_content_type');

var attachment = new Attachment();

attachment.write(tableName, sys_id, filename, content_type, value);

},

3) Call the UI Script function in an onload script of incident/problem/change/global table as required.

function onLoad() {

addPasteEvent();

}

After doing these just take a screen shot using print screen and paste it over an incident form. You can see the attachment added after a form reload.

NOTE: Its working fine in Chrome and FF. I don't have IE 11 to test. You can give it a try.

Try this and let me know if any questions.

View solution in original post

guhann · ‎10-29-2015

If you put it in a global ui script u can reuse the function. But for time being you may also try the code in an onload client script on your required table. May be you can let me know which demo instance you are trying. I can set this up for you.

smicloud · ‎10-29-2015

I actually did put this in an onload but the screenshot wasn't attached. The error logs are hidden so not that easy to debug. I verified that nothing happened in table sys_attachment.

Forget above comment, I tried in IE and I haven't added the support for that code yet. I did get it to work in Chrome now. Me and my collegues are very happy. I will add the code for the IE11 support next week as well.

guhann · ‎10-29-2015

Great! Try it in IE11 and lemme know

smicloud · ‎10-31-2015

This is the UI Script I created to get it to work with IE11 (perhaps it could work with IE10 but I have made it only work with IE11), Firefox and Chrome. I didn't get the example above to work with Firefox, not sure if I did something wrong but I think you have to get the image from the actual IMG DOM for Firefox.

To get it to work I added an editable div in an annotation with id "pasteArea" and styled to my liking. Below I attach the paste events. Since the browsers work a bit differently this was the solution I identified made the interaction the same for all browsers.

function addPasteEvent() {

// Get browser type and IE version

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

var isChrome = !!window.chrome && !isOpera;

var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+

var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;

var isIE = /*@cc_on!@*/false || !!document.documentMode;

var ieVersion = "";

if(isIE) {

ieVersion = getInternetExplorerVersion();

if(ieVersion != "11"){

alert("Cannot paste using Ineternet Explorer 10 or earlier. Please upgrade to Internet Explorer 11 for to be able to paste images directly into the task");

return false;

}

// Add paste event for all supported browser types

if(isChrome){

document.getElementById("pasteArea").addEventListener('paste', pasteAttachmentChrome, false);

}else if(isIE){

document.getElementById("pasteArea").addEventListener('paste', pasteAttachmentIE, false);

}else if (isFirefox){

document.getElementById("pasteArea").addEventListener('paste', pasteAttachmentFF, false);

}

//add event handler for removing and adding informative text in annotaction field

document.getElementById("pasteArea").addEventListener('blur', addInformativeText, false);

document.getElementById("pasteArea").addEventListener('focus', removeInformativeText, false);

}

function addInformativeText(){

document.getElementById("pasteArea").innerHTML = "Click here then paste screenshot (ctrl + v)";

}

function removeInformativeText(){

document.getElementById("pasteArea").innerHTML = "";

}

function pasteAttachmentChrome(){

var items = (event.clipboardData || event.originalEvent.clipboardData).items;

// find pasted image among pasted items

var blob = null;

for (var i = 0; i < items.length; i++) {

if (items[i].type.indexOf("image") === 0) {

blob = items[i].getAsFile();

}

// load image if there is a pasted image

if (blob !== null) {

var reader = new FileReader();

reader.onload = function(event) {

var base64Image = event.target.result;

attachClipboardData(base64Image);

};

reader.readAsDataURL(blob);

}else{

pastedNotImage();

}

function pasteAttachmentIE(){

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 url = URL.createObjectURL(clip.files[0]);

var blob = url.substring(4);

var reader = new window.FileReader();

reader.onloadend = function() {

var base64Image = reader.result;

attachClipboardData(base64Image);

};

reader.readAsDataURL(clip.files[0]);

}

function pasteAttachmentFF(event){

//setTimeout(getImage, 1)

var base64img = setTimeout(getImage, 1);

}

function getImage(){

var pasteCatcher = document.getElementById("pasteArea");

var image = pasteCatcher.getElementsByTagName("img");

if(image.length == 0) pastedNotImage();

attachClipboardData(image[0].src);

}

function pastedNotImage(){

alert("No image pasted");

}

function attachClipboardData(data){

var recordSysID = g_form.getUniqueValue();

var recordTable = g_form.getTableName();

var temp = data.toString().replace(/data:/g,'').split(';');

var contentType = temp[0];

var fileName = 'Screen shot.'+contentType.split('/')[1];

var content = temp[1].toString().replace(/base64,/g,'');

showLoadingDialog();

var attach = new GlideAjax('SaveAttachment');

attach.addParam('sysparm_name','attachScreenshot');

attach.addParam('sysparm_tableName',recordTable);

attach.addParam('sysparm_sys_id',recordSysID);

attach.addParam('sysparm_content_type',contentType);

attach.addParam('sysparm_value',content);

attach.addParam('sysparm_filename',fileName);

attach.getXML(getResponse);

function getResponse(response) {

window.location.reload();

}

function getInternetExplorerVersion() {

var ua = window.navigator.userAgent;

var msie = ua.indexOf("MSIE ");

var rv = -1;

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number

{

if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))){

//For IE 11 >

if (navigator.appName == 'Netscape') {

ua = navigator.userAgent;

var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");

if (re.exec(ua) != null) {

rv = parseFloat(RegExp.$1);

return rv;

}

else {

return fale;

}

else {

//For < IE11

return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));

}

return false;

}}

Mike Allen · ‎10-29-2015

Go to ServiceNow Developers and get your own instance assigned to you. You can test there.