Action_Paste Action_InsertGraphics don't seem to work

1

I am trying to insert an image using Action_Paste or Action_InsertGraphics both don’t seem to work but I can use Action_Paste to paste text with no problem any help

document.getElementById('insertTextButton').addEventListener('click', function() {
    if (isFrameReady && isHostReadySent) {
	const iframe = document.getElementById('office').contentWindow;
	const imageBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAFxJREFUKFNjPHPmzH9JSUkGfOD58+cMjE+fPv0PYhgbG2NVe/bsWQYpKSmIQhADJICuGCYGNxGkEASQFSOzMRTCFINoZNPJV0iU1UR5hqjgAQU4zNe4Av3Zs2cMADvzZllpcH3QAAAAAElFTkSuQmCC';
	const message={
                MessageId:'Action_Paste',
                SendTime:Date.now(),
                Values: {Mimetype: "image/png", Data: imageBase64}
            }		
        console.log("Sending TextInsert message:", message);
        iframe.postMessage(JSON.stringify(message), '*'); // Ensure this matches the PostMessageOrigin
    } else {
        console.log('Frame is not ready yet or Host_PostmessageReady not sent.');
    }
});
2

@codejq Welcome to collabora online forum :slight_smile:

To insert an image using the Action_InsertGraphic or Action_Paste in Collabora Online, follow these steps:

  1. Ensure Host is Allowed: Verify that your server IP or hostname is allowed in your coolwsd.xml configuration file.

    <lok_allow desc="Allowed hosts as an external data source inside edited files. All allowed post_allow.host and storage.wopi entries are also considered to be allowed as a data source. Used for example in: PostMessage Action_InsertGraphics, =WEBSERVICE() function, external reference in the cell.">
    <host desc="Your Server">your.server.ip.or.hostname</host>
</lok_allow>
  • someone uses server with domain: test.com which leads to 1.2.3.4 IPv4
  • if the URL contain domain, we need to enable domain in lok_allow( text.com)
  • if the URL contains ip we need to enable ip (1.2.3.4)
  • we do not do DNS resolve of the domain, so if we will enable ip, but use domain in the url - it will not work
  • Also lok_allow takes regex, so it is possible to write scheme of the domain/ip

  1. Use PostMessage API: Use the PostMessage API to send a message to insert the graphic. Here’s an example of how to insert an image using the Action_InsertGraphic.

    document.getElementById('insertImageButton').addEventListener('click', function() {
    if (isFrameReady && isHostReadySent) {
        const iframe = document.getElementById('office').contentWindow;
        const imageUrl = 'http://your.server.ip.or.hostname/path/to/your/image.png'; // Update with your image URL
        
        const message = {
            MessageId: 'Action_InsertGraphic',
            SendTime: Date.now(),
            Values: {
                filename: 'image.png',
                url: imageUrl
            }
        };
        
        console.log("Sending InsertGraphic message:", message);
        iframe.postMessage(JSON.stringify(message), '*'); // Ensure this matches the PostMessageOrigin
    } else {
        console.log('Frame is not ready yet or Host_PostmessageReady not sent.');
    }
});

  2. Enable CORS (Cross-Origin Resource Sharing): Ensure that the server hosting the image allows cross-origin requests if your image is hosted on a different domain.

  3. Debugging Tips: If it still doesn’t work, check the following:

    • Verify the image URL is correct and accessible.
    • Check browser console logs for any errors or warnings.

By following these steps, you should be able to insert images using the Action_InsertGraphic message in Collabora Online.

I found this discussion in which a user tries to insert graphics using Postmessage API from NC, it might be helpful for you.

Let us know if any further assistance.

Thanks,
Darshan