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

azman · ‎11-03-2016

Hi

I have tried using the functionality with the new service portal but it doesn't show the div to copy paste the image,

while doing some research on the matter i found that field of type 'macro' are not supported by service portal,

Do you have a workaround to get the code to work for the service portal?

Thanks!

larstange · ‎11-04-2016

Hi

In Service Portal you have to make a paste image widget to have this functionality.

I have succeeded in making such a widget but it is not easy to make a version which is shareable, since it requires changes to OOTB widgets.

It is relativley easy to take the code from this thread and build a widget with the same functionality.

There are two issues to solve

1. How to update the UI to show the new attachment added

2. How to attach on a record producer, as no record exist yet

1. We need to update the UI to show the attachment afterwards. When using the widget in a ticket view, they are shown automatically in the conversation stream - no problem there.

But when on a record producer the area which displays the attachments resides in the widget "SC Catalog Item". And this widget does not automatically update the attachments list, when you add an attachment.

Therefore the SC Catalog Item widget has to be modified so you can broadcast a message from the paste image widget that a new image has been added, and then trigger an update.

Looks like this:

//Listen for attachments added by copy/paste widget

   $scope.$on('sp.rptask.attachmentAdded', function(e) {

   $scope.attachmentHandler.getAttachmentList();

   });

2. The issue here is that the Service Portal does not generate the sys_id of to-be record ahead of time as the old UI does. Instead attachments are related to the "sp_portal" form using an internally generated ID within the SP. Only when the record producer is submitted, the attachments are moved over to the new record.

To allow the paste image widget to know this internal ID, the SC Catalog Item widget must broadcast the internal ID to the paste image widget, so it can create attachments on the correct ID.

Looks like this:

//Send attachment guid to copy/paste widget

$rootScope.$broadcast('sp.rp.attachguid', $scope.data._attachmentGUID);

kbanerje · ‎01-17-2017

Hi Lars,

Excellent product.How can I avoid the Annotation to be added in the form and transfer the design to an UI Action onclick of which it will attach the screenshot itself.

Please advice?

JC S_ · ‎04-09-2019

Hi,

Any improvement on how we can paste directly on Service Portal without changing the OOTB widgets? Been 2 years since, not sure if we can now do it without modifying OOTB.

Dan Covic2 · ‎01-05-2024

You still have to adjust the OOTB widget to paste directly on SP.

This is a good explanation of how to do it:

https://www.youtube.com/watch?v=cXYmGc9jpoo&ab_channel=G%C3%B6ranLundqvist