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

graham_c · ‎07-25-2016

Hey again,

I think I have gotten to the bottom of why there is an issue. The Instance version I was trying this on was a Helsinki instance so I tried installing it on a Geneva instance and it worked fine, so the issue must exist in Helsinki. That's gonna be fun to try and fix haha.

Thanks

jean-lucchatton · ‎07-25-2016

Well done Graham !

As you have an Helsinki instance and we are not far to find the cause,i t would be nice to finish the job ....

Could you try to ?

1) add a return statement after the line "attachmentRec = a.write(iii, filename_with_number, content_type, value);" ?

2) attach a file from the clipboard

3) look into the sys_attachment table for the sys_id value to see if it match the final_sys_id

4) move the return statement a couple of line below and perform the step2 1 to 3

5) do it until you are at the end of the function scr_attachScreenshot()

Thanks

Jean-Luc

graham_c · ‎07-25-2016

Hi Jean-Luc,

I tried following your steps but wasn't having any luck. Then it occured to me if ServiceNow have changed how the g_form.getUniqueValue method works for record producers and did a little experiment.

I changed the below code in your (our ) UI Script to not set the final_recordSysID variable with the g_form.getUniqueValue() method and instead tried using just the gel('sysparm_item_guid').value method. [Lines 120 - 125 of UI script scr_addPasteEvent]

Before

if (g_form.getUniqueValue() !== '') {

   final_recordSysID = g_form.getUniqueValue();

   }

   else {

   final_recordSysID = gel('sysparm_item_guid').value;

 }

After

final_recordSysID = gel('sysparm_item_guid').value;

I am pleased to say that this worked in Helsinki as it sets the attachment sys_id to be the record the record producer is creating.

Create Incident Record Producer with clipboard attachment

Sys_attachment table showing the attachment pasted in to the sys_id of the new incident record

After the record producer is submitted and the incident is created, the attachment is automatically associated with the new Incident.

I have no idea why the g_form.getUniqueValue() method didn't work as it does in Geneva but this solution seems to work fine unless you have some concerns about doing this?

Thank you so much with your help with this, you are awesome!

jean-lucchatton · ‎07-28-2016

Hi Graham,

Thanks for your debugging. I'm glad it works now with Helsinky. However, your code don't work in Form.

If think the following one should work in all case (Geneva+Helsinki and Record Producer+Form).

Could you validate it under Helsinki ?

Regards

Jean-Luc

if (gel('sysparm_item_guid')) {

   final_recordSysID = gel('sysparm_item_guid').value; 

 }

 else {

   final_recordSysID = g_form.getUniqueValue();

 }

 //alert('final_recordSysID=' + final_recordSysID);

graham_c · ‎07-29-2016

Hi Jean-Luc!

Of course, I had been concentrating on getting the Record Producer to work so much I forgot about the form version! Your code change worked in Helsinki for both the form as well as record producers.

I've also tested the exact same code in Geneva so this works in both upgrade families.

Well done, thanks!