Clipboard

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

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

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

MDuchemin
2480 ● 1 ● 6

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

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

MDuchemin
2480 ● 1 ● 6

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