Paste (ctrl+v) a ScreenShot and send to server

asked 2020-07-08 08:49:04 +0800

54patman gravatar image 54patman
13 2

updated 2020-07-08 08:49:55 +0800


I have struggled with this for a few days, I need to take a screen shot or copy an image and paste it in the browser. Then it will upload the image data to the server. From the client there is the onPaste which works but I have not been able to get it to work with zk.

The only zul component server side that has onPaste is the textbox so this won't work. So I need the client side to capture the onPaste and then process the clipboard.

If I use pure javascript I get event.clipboardData || event.originalEvent.clipboardData and from there I have the image, but I don't know how to send it to the back end. I don't have access to zk.UploadUtils.ajaxUpload().

If I use just <script> in a zul page and try in a function I call from an onPaste: navigator.clipboard.read().then( img => { alert('promise: ' + img) }
). catch(reason => {alert('fail: ' + reason)});

My img is of type ClipboardItem, but contains no data. I'm using Chrome 83 and it should work.

From the Java code I have tried a mix of zul and DIV.setWidgetListener("onPaste", "upload(event)") and "upload" is a function in the script tag. But the "event" is not the PasteEvent but an Object containing the keys pressed; no data or clipboardData.

As another constraint I'm using Richlet and GenericForwardComposer.

Is there some sample code I can look at?

Thanks in advance.

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2020-07-08 11:05:11 +0800

cor3000 gravatar image cor3000
5262 2 7
ZK Team

updated 2020-07-08 12:03:49 +0800

Since image data from a canvas should be essentially equivalent to data from a pasted image I don't see a technical difference to you previous question: https://forum.zkoss.org/question/112423/get-canvastodataurl-sent-to-richlet/

The answer would be the same: Once you have the (image) data -> call the ZK provided utility function:

however you mention:

I don't have access to zk.UploadUtils.ajaxUpload()

What does that mean? How is the util not available/accessible? (from java code? or missing at client side?)

Using/trying arbitrary events won't work, uploads are handled differently.

ZK's normal events are sent as ajax form requests with key value parameters.

Uploads are sent as multi-part requests requiring a different handler at server side which is targeted by 'zk.UploadUtils'.

Technically I don't see a problem here, I assume my explanations weren't detailed enough to make this clear.

So here an updated example featuring both the canvas upload and the paste upload. https://zkfiddle.org/sample/3g4588e/13-upload-canvas-paste This time I tried to put as much code as possible (in zkfiddle) inside the Java composer and moved the JS to an external file. Transforming this into a Richlet code is now more obvious.

I hope this is usable from your code as I don't see how the zk.UploadUtil.ajaxUpload() function could be 'inaccessible'.

link publish delete flag offensive edit


Thank you very much, you have been a great help. It's exactly what I was hoping for. One thing I don't understand is the separate js file. If I take the contents and put it between the <script>JS FILE CONTENTS</script> tags the page has a parsing error, at the for loop. I wouldn't expect this.

54patman ( 2020-07-08 19:17:26 +0800 )edit

Ok I found the issue, replace 'for (var i = 0; i < items.length; i++)' with 'for (var i = 0; i &-l-t-; items.length; i++)' allows script to be copied inline. It appears the '<' causing a parsing error. Even this forum will render the &-l-t-; properly so remove '-'. Again wonderful support and help.

54patman ( 2020-07-08 19:52:37 +0800 )edit

that's an expected thing in XML... either escape using $lt; or surround the script contents inside the script tags with a CDATA section

<script><![CDATA[... here your unescaped script content ...]]></script>


cor3000 ( 2020-07-09 14:49:07 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2020-07-08 08:49:04 +0800

Seen: 7 times

Last updated: Jul 08

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More