Back

Technologies:

javascriptjavascript
node.jsnode.js
avatar
Tolerim
a month ago

How can images be sent through the clipboard stream in Guacamole?

I have created an application that uses the guacamole-lite npm package to establish remote connections. Currently, the application allows copying and pasting text between local and remote machines using the guacamole.setClipboard() method. However, I would like to implement the functionality of pasting images/pictures as well. I have tried several methods, including the code below, but to no avail: 
function retrieveImageFromClipboardAsBlob(pasteEvent){
      var items = pasteEvent.clipboardData.items;
      let blob = "";
      for (var i = 0; i < items.length; i++) {
        blob = items[i].getAsFile();
      }
       return blob;
    }

    window.addEventListener("paste", async function(e){
      let imageBlob = retrieveImageFromClipboardAsBlob(e);
      console.log(imageBlob, "image blobbbb");

      console.log(imageBlob.type, "type of image blobbbbb");

      const stream = guac.createClipboardStream("image/jpeg");
      guac.sendBlob(stream);

    }, false);
I have also attempted to use the Guacamole.ArrayBufferWriter() class to no avail: 
const writer = new Guacamole.ArrayBufferWriter(stream);
writer.sendData(imageBlob);
I have also tried sending the image in Base64, but this method did not work either. Can someone please assist me in identifying where I am going wrong?
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems that you are trying to send images in the clipboard stream using the guacamole-lite npm package. I found a similar question on StackOverflow where the user was trying to send images in the clipboard stream using Guacamole. The solution was to use the Guacamole.ArrayBufferWriter() class to send the image data as an ArrayBuffer. Here is an example of how you can use the Guacamole.ArrayBufferWriter() class: 
const writer = new Guacamole.ArrayBufferWriter(stream);
writer.sendData(imageBlob);
I hope this helps. Let me know if you have any other questions.

Sources

Sending images in the clipbaord stream in Guacamole@glokon/guacamole-lite - npmguacamole-common-js - npm
avatar
Tolerim
a month ago
It looks like the issue is with how you're sending the image data to the Guacamole stream. You're creating a stream using guac.createClipboardStream("image/jpeg"), but you aren't actually sending any data to it. To send the image data to the stream, you need to write it to the stream using a writer. Your code includes the following lines: 
guac.sendBlob(stream);
You're creating the stream correctly, but then you're calling guac.sendBlob(stream), which is only for sending a pre-existing blob to the clipboard. Instead of guac.sendBlob(), you need to use a writer to write the image data to the stream: 
writer.sendData(imageBlob);
This should send the image data to the stream and allow you to paste the image on the remote machine. If you're still having trouble, you may want to check if the clipboard stream is working correctly with text, as there may be other issues with your code.
;