0

Clipboard

asked 2007-03-22 21:20:08 +0800

admin gravatar image admin
18691 1 10 130
ZK Team


Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4222895

By: opens

Is there a way to send something in the clipboard of the user when he click on a menu item ?

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2007-03-23 18:49:52 +0800

admin gravatar image admin
18691 1 10 130
ZK Team


Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4224514

By: opens

Imagine that you have a list of pages and you right clique an item. There would be a "Copy URL to clipboard" option...

link publish delete flag offensive edit

answered 2007-04-02 04:53:20 +0800

admin gravatar image admin
18691 1 10 130
ZK Team


Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4239040

By: henrichen

Unless Javascript and Browser support such functions. Do you know how?

link publish delete flag offensive edit

answered 2007-04-02 15:10:36 +0800

admin gravatar image admin
18691 1 10 130
ZK Team


Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4239805

By: opens

With execCommand('copy') you can, but it's IE only

link publish delete flag offensive edit

answered 2007-04-02 15:12:48 +0800

admin gravatar image admin
18691 1 10 130
ZK Team


Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4239809

By: sduensin

That's because IE isn't smart enough to know it's a security problem. :-) It's intentionally disabled on other browsers since it allows data to leave the sandbox.


Scott


link publish delete flag offensive edit

answered 2023-11-10 02:35:15 +0800

rmedina gravatar image rmedina
100

Hello everyone. I am looking to send the content of the clipboard (an image) to the server. I have tried it with a javascript function, inserting the contents of the clipboard into an image and loading it's content in the server side. My javascript function is: async function copyClipboard() { destinationImage = zk.Widget.$(jq('$imageclp')); try { const permission = await navigator.permissions.query({name: "clipboard-read"}); if (permission.state === "denied") { throw new Error("Not allowed to read clipboard."); } const clipboardContents = await navigator.clipboard.read(); for (const item of clipboardContents) { if (!item.types.includes("image/png")) { throw new Error("Clipboard contains non-image data."); } const blob = await item.getType("image/png"); destinationImage.src = URL.createObjectURL(blob);; } } catch (error) { console.error(error.message); } }

But although the image is seen in the browser, its content is not refreshed on the server, it is still empty. I am very new to javascript and I need help. Can someone help me solve it?

Thank you

link publish delete flag offensive edit

answered 2023-11-14 16:17:21 +0800

MDuchemin gravatar image MDuchemin
2480 1 6
ZK Team

Hey there Medina,

Here's a fiddle with a formatted version of your script: https://zkfiddle.org/sample/qnl251/18-Copy-client-image-from-clipboard

Why it didn't work:

destinationImage is a zk widget, not a DOM object. If you want the replace the src value on this widget, the correct operation is to use widget.setSrc(newSrcValue), not widget.src = newSrcValue. (you can test it out in the fiddle, if you click the button to open the test page full screen in the top-right corner, since it will not work inside the regular test iframe)

Some notes:

This lets you copy the current content of the client-side clipboard, and insert that value into the current image src.

This will NOT send the image content to the server.

If your goal is to temporarily put the image in your page, then it is enough. But since your goal is to send the image to the server, then there is a few more steps to take.

Zk's client engine communicate with the server-side through requests and responses. See here for details on that: https://www.zkoss.org/wiki/ZKDeveloper'sReference/Overture/Architecture_Overview

So at this point, the "easy" answer would be to send an event to the server with the content of the image data. However, this would likely fail if the data is larger that the allowed transfer size for one request (which is likely the case with images).

As a result, it would make more sense to use an upload component to send that image data to the server.

Here's the more complicated version that does that: https://zkfiddle.org/sample/qnl251/20-Copy-client-image-from-clipboard

This works with the following steps:

  • Your original code to access the clipboard is reasonable, so I kept that as-is
  • In addition to displaying the image in the current page, I've added a FileUpload component to the page, which acts as the uploader for the image file.
  • when processing the content of the clipboard, if the content is an image blob, I make a file out of it, and then set that file as the content of the uploader's input anchor.
  • I then trigger an onChange event on the uploader's input anchor, to trigger the upload process.
  • At server side, we can listen to the onUpload event on the uploader (I used inline code here, but you can do that in a composer), and retrieve the media (the uploaded file) from the upload event.
  • Then you can do whathever you want with that media at server side (save it in a directory, use it as source for a page object, send it back as a download, etc.). For this sample, I just sent it back as a download, to verify that we have access to it at server-side
link publish delete flag offensive edit

answered 2023-11-14 16:18:27 +0800

MDuchemin gravatar image MDuchemin
2480 1 6
ZK Team

@Medina (bumped karma for links, images and other forum functions)

link publish delete flag offensive edit
Your reply
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

Follow
3 followers

RSS

Stats

Asked: 2007-03-22 21:20:08 +0800

Seen: 236 times

Last updated: Nov 14

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