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-22-2016

Hi Jean-Luc!

I've downloaded your update set and installed it and it works perfectly on the Incident form. However when I have tried following your instructions for the record producer, it allows me to paste the image from the clipboard and upload it as an attachment, but once that record producer is submitted it is not showing on the incident. Is this what you mean by "- attachment cant be done if the incident is in creation phase (not yet saved)"?

Attachment added to RP

After submission, no attachment stored against new Incident.

From what I can see about the attachment that is inserted into the sys_attachment table is that it is adding the attachment to the Incident table, but the sys id is the id for the record producer itself instead of the newly created Incident so that would explain why it is not linking.

I guess that you can't actually use this with a record producer as the incident record has not been created yet so any attachment pasted in will essentially be orphaned, unless there is a way to update the attachments after the incident has been inserted to the correct sys_id?

Any help would be great.

Again - great work

Thanks

jean-lucchatton · ‎07-23-2016

Graham,

Could you have a look in the system log ? My code write there a couple of debug info.

What I ve seen is that the sys_id of the record producer is sys_id on the incident table. I've checked this when I used the OOB way, i.e the paper clip.

in SNOW It is not possible to create an attachment to an not existing incident. The attachment.write method checks for an incident record but with the GlideSysAttachment.write method, the current record has not to saved. Thus I created a dummy incident, linked the attachment to this record and after that updated the attachement record to the actual incident (that is the trick...)

P.S. the sentence " attachment cant be done if the incident is in creation phase (not yet saved)" was what didn't worked in your code and what I thought is correctly implement now 😉

graham_c · ‎07-23-2016

Hi Jean-Luc,

I like it!

Here are my logs:

scr_attachScreenshot: step11. final_inc_sys_id=3f1dd0320a0a0b99000a53f7604a2ef9, filename_with_number=Screenshot_007.png, content_type=image/png, value=[B@d7fe7f
scr_attachScreenshot: attachment record to the correct incident sys_id is set
scr_attachScreenshot: step14

From the first error log I can see that the final_inc_sys_id variable matches the sys_id of the record producer, which is right as you have said it mirrors the OOB functionality with the paperclip - I just can't seem to figure out why it's not updating the attachment records when the record producer is submitted to the new sys_id.

Thanks

jean-lucchatton · ‎07-25-2016

Hi Graham,

Strange ...

Could you try following :

1) In the record producer paste an image from the clipboard -> image name = Screeshot_001.png

2) In the same incident, attach a flle (e.g. Capture.PNG)

At this point the incident RP, should display the following attachements :

and the sys_attachment table should contain two new records :

3) submit the incident

At this point an new incident should have been created with the sys_id, e.g. 274dc64adbfc66009855f1eabf961936, that match the Table sys ID of the 2 records in the attachment table.

Could you tell me what do you get on your instance when you do the same actions ?

Regards

Jean-Luc

graham_c · ‎07-25-2016

Hi Jean,

Hope you had a good weekend!

I've followed the steps you have provided and here are my results:

I pasted in an image that was uploaded as Screenshot_001.png then attached home1.png via the paperclip method on the Create Incident record producer.

Before submitting the Incident record you can see that the files are created in the sys_attachment table.
Notice that the table sys id's are different between the files where Screenshot_001.png's is the same sys_id as the Create Incident record producer (3f1dd0320a0a0b99000a53f7604a2ef9).

I then submitted the Incident and it correctly shows the home1.png file but not Screenshot_001.png.
Both files in the sys_attachment table remain unchanged.

Thanks