[HowTo] Enable Copy & Paste + Drag & Drop of files on Service Portal (without widget clone)

[Markus Kraus]

Base on this Article (How to support copy / paste of pictures on Service Portal), i have derived a better method of enabling copy & paste in the Service Portal (e.g. ticket and form page). This method does *not* rely on the insecure and upgrade risky widget-clonening mechanism.

Hint: If you need the same feature for classic you, checkout this repo:
https://github.com/kr4uzi/ServiceNow-ClassicUI-Copy-Paste

Update 03. Dec. 2023: Vancouver finally has Drag & Drop support:

The difference between the OOTB and my solution is, that mine works "implicit" - you do not have to open the attachment dialog to be able to copy & paste or drag & drop.

As this app is now only an alternative approach to an existing feature (I strongly advise to not reinvent the wheel and stick to OOTB as much as possible), I've decided to make the app "opt-in".

This means, that you have to explicitly enable this application on Portal Pages now. This is done by adding the following to the "Page Specific CSS" field of a particular Service Portal Page:

Page Specific CSS:

body {
  --pcp-enabled: true;
}

Conclusion: Since Vancouver, this application is obsolete. I will most likely no longer maintain it after Vancouver.

Update 18. Oct. 2023: Firefox now has Copy & Paste support. The application does not need to be updated for this to apply!

Update 15. Dec. 2022: I have created improved version of this in a custom scoped application. It will enable Copy & Paste (technically not possible on Firefox and IE11) as well as Drag & Drop (supported by all browsers) without any additional configuration on several widgets. Because of this, you will not have to do any modification to your Service Portal whatsoever. Everything "just works".

The following widget/pages are supported: 

Widget Name	Used in OOTB pages	Notes
SC Catalog Item	sc_cat_item
Ticket Conversation	ticket
Standard Ticket Conversation	standard_ticket	Ticket page used by Employee Center
Form	form

Please fork the following repo (this will make sure that you have a way to receive updates in the future without visiting this community page): https://github.com/kr4uzi/ServiceNow-Portal-Approval

Open the studio and click "Import From Source Control" (use your forked git repo).

EDIT 20.05.2022:
Thanks to @Annika Aaltonen we discovered that IE11 and Firefox do in fact not support Copy & Paste File Upload. However i have added support Drag & Drop Support as a replacement.
 

[Mark Roethof]

Nice one! This would prevent cloning a widget, owning the widget, missing updates on the ootb widget, potential security issues.

Instantly works for Service Portal. Unfortunately not for Employee Center or I made a mistake 🙂

Kind regards,
Mark

[Markus Kraus]

Thanks for the info! There is actually a page route map defined for the ticket-page and employee center. 

To make this work with Employee Center, please note my change on the initial post (you have to use a different page (standard_ticket) as well as a different widget Sys ID in the JSON options on the sp_instance record: a54beb3a87f10010e0ef0cf888cb0bba

[Annika Aaltonen]

This is really nice, good job! I implemented the solution, but for some reason I am unable to paste in non-image type files in Firefox. Any idea what browser requirements this setup would need? I already cleared my cache, and I am allowing pop-ups. In Chrome everything works fine for all types of attachments, so this is a bit strange...

Thanks,
Annika

[Markus Kraus]

Thanks for the info. After some investigation i can now confirm that firefox (and IE11) do in fact not support Copy & Paste Attachments. I have added Drag & Drop support as a replacement (the original post has been updated accordingly).

[Kezza]

Fantastic work thanks Markus.

[Kelly Logan]

Any idea why the 'Paste Image' tech for catalog items still works with Firefox and this doesn't? Is there some way to adapt that functionality and get around the issues you're having with Firefox and UE11?

[Markus Kraus]

@Kelly Logan The "Paste Image" Script isn't working at all. With the latest version of Chrome im getting a "This browser is not support yet..." Message and on Firefox nothing happens at all...

EDIT: The method used in this post seems now to be compatible with Firefox. Copy & Paste of Attachments is working with my Firefox v. 118.0.2 64-bit.

EDIT2: My solution btw also enables Copy & Paste Images on Record Producers without having to modify the record producer whatsoever. And it additionally does not suffer from the duplicate attachment upload caused by the "Paste Image" Script...

[Kelly Logan]

We have been using the 'Paste Image' widget on our catalog items for the last year or two, now on Utah. It works with all browsers we've tried (I've tested on Monday with Chrome (Version 118.0.5993.71 (Official Build) (64-bit)) and Firefox (also 118.0.2 (64-bit) and I think IE11 was tested earlier). We have it in a variable set that is added by default to all of our catalog items. 

What we are looking to do is duplicate that functionality on the ticket view of the portal (standard_ticket page).

The requirement is to have Firefox browser functionality so that users viewing an open ticket on the portal can take a screenshot, hit <Ctrl-V> and have it attached automatically to the ticket as a comment.

What I'm not clear on is why a user on Firefox can browse to a catalog item, use Ctrl-V and works just fine to add an attachment when this widget part of a variable definition on that catalog item, but when you try to use similar tech on another portal type page, a security feature locks it down and stops you. 
 

(In fact, now I'm wondering if I should even ask that question because if there's a loophole in security that Firefox tried to set up, they might patch that and then neither would work. .  ;^)

My theory is that comparing the two different solutions might point out why one is working while the other isn't. That's why I posted here, to see if it was anything obvious you might be able to see, being more familiar with the code (and likely much more familiar with browser event listeners and cut and paste event handling :^).

In the meantime, we'll keep looking at it to see if we can duplicate the 'Paste Image' functionality in a widget or widget code that doesn't need to be tied to a catalog item variable and can be used in more general portal pages like the Standard Ticket viewing page.

[Markus Kraus]

Long Story Short: Under the hood there is no functional difference between the solutions. Both are registering on the "paste" event. And back when i originally developed the solution, Firefox simply didn't "supply" the Image that is in the clipboard (but this apparently changed).

There are however some advantages of my solution:

- It doesn't cause for the well-known double paste bug (which the "Paste Image" implementation suffers from)

- No modification of any OOTB artefacts nor Record Producers / Catalog Items Required 

- Copy & Paste is enabled on all OOTB pages / widgets just by installing the app (e.g. sc_cat_item, standard_ticket, ...)

- Automatic Update if you fork the original repo and "sync" the app from time to time (Note: If you want an fully automatic update, please check out the "ServiceNow Marketplace" application on my github)

- It's a Scoped App (easy uninstall once this feature is implemented by ServiceNow)

[Kelly Logan]

Thanks, we found that most browsers were Chrome anyway so the need for Firefox can be ignored for now. 

Forked your repository as suggested, had to create a personal token for the credential (required in SNow now) but otherwise, easy import to Studio and it did work with no other actions necessary.

Thanks again!

[Kelly Logan]

I'm getting some inconsistency in functionality on the portal. Note we are using Employee Center and I tested with Chrome Version 119.0.6045.124 (Official Build) (64-bit).

What I'm noticing, say with the ticket viewer (/sp?id=ticket&table=incident&sys_id=4942f1c91b10411001b0a7d1ec4bcb63) is that if the focus is on the 'Standard Ticket Tab', Ctrl-V reliably pastes a screenshot in the clipboard in as an attachment. 

However, if the focus is on the 'Standard Ticket Header' widget, say if I just clicked the 'Show Less ^' control, the code tries to work, puts the momentary message "updating attachment..." between the comment field and the activity trail, but then doesn't attach the image. 

Also, once this starts, to get it to work again you need to put the cursor manually into the comments field. Maybe this is because there is a default to put focus in the comment field when you first click on the widget?

It seems like you could fix this by specifically putting focus and the cursor onto the comment field before completing the attachment process. 

[Markus Kraus]

@Kelly Logan Hm, can you tell me the steps to reproduce this on an PDI? When im testing this, im not getting the "Show Less" button.

Generally speaking, the script should only be working, if clicked on the activity stream ("widget conversation"), e.g. by clicking on the "Type your message here...". On the standard_ticket page there should be no other area where you can actually add an attachment via Copy & Paste.

The easiest way to "debug" is to use the drag & drop feature by the way. Whenever you get this grey overlay, your drag will (or should) result in an upload. Can you maybe record a short video the inconsistent behaviour your were noticing? Maybe write me a personal message also.

EDIT: Are you using the "static" code, or do you use the git-version by the way?

[Kelly Logan]

Hey @Markus Kraus, thanks for the quick reply!

Code Source: I am using a fork off the git-code, https://github.com/klogan-synoptek/ServiceNow-Portal-Copy-Paste , which I imported into our glide-utah-12-21-2022__patch7-09-07-2023 version system using Studio as directed.

Activity Stream in focus: I'm not sure I understand your message. Are you confirming that the user does need to click on the  Activity stream containing widget to make this work? If so, that's fine, it's a small thing to ask a user to do, I just wanted to make sure that was working as designed. 

Duplicating the process: This is easy, open the ticket view page (/sp?id=ticket&table=incident&sys_id=fc4862ea1b8d015001b0a7d1ec4bcb8d), take a screenshot, type Ctrl-V - the message "updating attachment. . ." momentarily appears, then disappears and no attachment is added.

Click in the "Type your message here. . ." box and hit Ctrl-V - attachment is added as desired.

Take another screenshot, click on the 'Actions' control to put focus back onto the 'Standard Ticket Header' widget, type Ctrl-V - the message "updating attachment. . ." momentarily appears, then disappears and no attachment is added.

Once focus is lost, Ctrl-V will not work until the cursor is placed back in the "Type your message here. . ." box.

Once again, if this is the way it's going to work, that's fine. I can inform the service desk to just be sure to click in the box before they hit Ctrl-V. Thanks again for providing this solution and for any further updates.

[vidhya_mouli]

We had exactly the same requirement for Standard Ticket Tab in Employee Center. We implemented it successfully with the help of this article. Thank you.

[vidhya_mouli]

Is it possible to delete the uploaded images? 

[Kelly Logan]

Vidhya Mouli,

The images become regular file attachments so anywhere you can normally delete an attachment, you can delete the image. For example, on a ticket viewer, you can choose the Attachment tab and then on the list of attachments you should see a delete icon on the right hand side (here it's an "X").

Hope that helps!

[LizGaucin]

Is it possible to hide this from the forms in Compass? Or create certain rules/policies to only display on selected forms? 

[Thej1]

Hi,

I have added the below code in the standard ticket page. But it is not working in the washington version. cpuld you please help me n this ?

Page Specific CSS:

body {
  --pcp-enabled: true;
}

 Thanks

[Markus Kraus]

@Thej1 Sorry for the late response, I dont seem to be getting the mail notifications anymore.

If you want to enable this particular implemenation (note: when clicking on the attachment icon you will have a drag & drop area + copy & paste in the modal popup on most [every?] ootb form), you need to either:
A) go add this css to the pages where you want to have the feature enabled (e.g. /sp?id=form&table=... => open the page with ID=form😞

B) Open the Service Portal Record > Theme > (related list) CSS Includes > [New] > follow the steps in this screenshot:

[Markus Kraus]

@LizGaucin Unfortunately this is OOTB behaviour and I cannot answer this in detail in this thread (please open a new thread / question in the community). I can however tell you that yes, it can be modified (most likely even globally) by using CSS and/or javascript injections (the same way the copy&paste implementation does it).