-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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 ?
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...
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?
Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4239805
By: opens
With execCommand('copy') you can, but it's IE only
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
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
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:
Asked: 2007-03-22 21:20:08 +0800
Seen: 236 times
Last updated: Nov 14