Insert img whith PostMessage API

TawanGMenezes · June 27, 2024, 1:37am

I’m having trouble sending an image to the document with the postmessage API, I created a customizable button to do this, and I’m getting the document’s returns, when the button is selected I send the image to the document, but the image is not inserted, Note: I’m using iframe

receiveMessage(event) {
let jsonData = ‘’;
if(typeof event.data === ‘object’) {
jsonData = event.data;
}
else {
jsonData = JSON.parse(event.data);
}
console.log("Message received from the child: ", jsonData); // Message received from child
const protocol = window.location.protocol;
const host = window.location.host;
const port = window.location.port ? :${window.location.port} : ‘’;

    // Formar a URL base
    const baseUrl = `${protocol}//${host}`;

    if(jsonData.MessageId == "Clicked_Button") {
        if(jsonData.Values.Id == "brasao__") {
            document.getElementById('edicaoTextoDescricao').contentWindow.postMessage(
                JSON.stringify({'MessageId': 'Send_UNO_Command',
                'Values': {
                    'Command': '.uno:DefaultFormat',
                    'Args': {}
                }
                }), '*');

            document.getElementById('edicaoTextoDescricao').contentWindow.postMessage(
                JSON.stringify({
                    MessageId: 'Send_UNO_Command',
                    'Values': {
                      'Command': '.uno:InsertHeader',
                      'Args': {}
                    }
                  }), '*');    

                

            document.getElementById('edicaoTextoDescricao').contentWindow.postMessage(
                JSON.stringify({'MessageId': 'Send_UNO_Command',
                    'Values': {
                    'Command': '.uno:CenterPara',
                    'Args': {}
                    }
                }), '*'); 


           
            var urlImg = baseUrl + '/ui/img/brasao.png';
            urlImg = urlImg.toString();
            document.getElementById('edicaoTextoDescricao').contentWindow.postMessage(
                JSON.stringify({
                    MessageId: "Action_InsertGraphics",
                    Values: {
                        url: urlImg,
                    }
            }), '*');
            
            

            

            setTimeout(function() {

                document.getElementById('edicaoTextoDescricao').contentWindow.postMessage(
                    JSON.stringify({'MessageId': 'Send_UNO_Command',
                    'Values': {
                        'Command': '.uno:InsertText',
                        'Args': {
                            Text: {
                                type: 'string',
                                value: 'PODER JUDICIÁRIO\r\n'
                                +' Tribunal de Justiça do Estado de Goiás\r\n'
                                +' Gabinete da Presidência\r\n'
                                },
                            ParaStyleName: {
                                type: 'string',
                                value: 'Heading 1' // Estilo de cabeçalho pré-definido
                                }
                        }
                    }
                    }), '*');
            }, 1000);
        }

        if(jsonData.Values.Id == "abrir__") { 
            if(document.getElementById("formFile") != null && document.getElementById("formFile") != undefined) {
                document.getElementById("formFile").click();
            }
        }
    }

    if(jsonData.Values!= undefined && jsonData.Values.Status == "Document_Loaded" && document.getElementById('edicaoTextoDescricao') != null && document.getElementById('edicaoTextoDescricao') != undefined) {
        document.getElementById('edicaoTextoDescricao').contentWindow.postMessage(JSON.stringify({
            "MessageId" : "Insert_Button",
            "Values" : {
              "id" : "abrir__",
              "imgurl" : baseUrl + "/ui/img/folder.svg",
              "hint" : "Abrir",
              "insertBefore" : 'save',
              "label" : "Abrir"
            }
          }), '*');

          document.getElementById('edicaoTextoDescricao').contentWindow.postMessage(JSON.stringify({
            "MessageId" : "Insert_Button",
            "Values" : {
              "id" : "brasao__",
              "imgurl" : baseUrl + "/ui/img/brasao.png",
              "hint" : "Adicionar Brasão",
              "insertBefore" : 'save',
              "label" : "Brasão"
            }
          }), '*');
    }
}

Tex · June 27, 2024, 2:28am

Hey @TawanGMenezes, welcome to the forum.

Are you successfully getting other PostMessage API stuff working, but just this image insertion is giving you trouble?

Note: I also see this paragraph in the API page:

It is to be noted that as mentioned in WOPI specs, Collabora Online frame will ignore all post messages coming from the host frame if Host_PostmessageReady has not been received. Further, since for embedding Collabora Online as an iframe WOPI implementation is a must, it is required that PostMessageOrigin property is present in WOPI host’s CheckFileInfo response. Otherwise, no post messages will be emitted.

Do you think this applies to your case?

Also helpful would be:

What browser/OS are you using?
Which Collabora version?

Oh? Sounds interesting. What are you trying to accomplish with your custom button?

jessie · March 9, 2026, 9:31am

all PostMessage API not work. but i’m sure “Note: I also see this paragraph in the API page:"
version:Collabora 25.04

darshan · March 9, 2026, 10:33am

hi @jessie can you please explain what is the exact issue with post message API you are facing right now?

jessie · March 10, 2026, 1:28am

The “PostMessage” message was successfully sent, but no response was received from the editor, and no error log was captured. Only a warning log was generated.

wsd-00001-00044 2026-03-09 15:05:59.729656 +0800 [ docbroker_001 ] WRN Client session [004] not found to forward message: o719 unloaded: viewid=5 views=1| wsd/DocumentBroker.cpp:5324

jessie · March 11, 2026, 8:33am

The implementation of a similar screenshot function through the api failed, but there were no exception logs. The implementation code is as follows：

const frame = document.getElementById('collaboraFrame');
frame.contentWindow.postMessage({'MessageId': 'Action_FollowUser',
    'Values': {
        'Follow': true
    }
}, '*');

Summary

This text will be hidden

darshan · March 11, 2026, 10:56am

Hi @jessie

Thanks for the logs and screenshot

The warning in the log indicates that Collabora Online could not find the client session when the message was forwarded:

Client session [004] not found to forward message
o719 unloaded

This usually means the document or view session was already unloaded when the postMessage was sent. So the message is delivered to the iframe, but the editor backend no longer has an active session for that view, therefore no response is returned.

Suggested checks:

Ensure the message is sent only after the editor is fully loaded.
Listen for the message event from the iframe and wait for something like:

Example approach:

window.addEventListener('message', function(e) {
    if (e.data && e.data.MessageId === 'App_LoadingStatus' &&
        e.data.Values && e.data.Values.Status === 'Document_Loaded') {

        const frame = document.getElementById('collaboraFrame');
        frame.contentWindow.postMessage({
            MessageId: 'Action_FollowUser',
            Values: { Follow: true }
        }, '*');
    }
});

Above is example not exact implementation. just for your reference…

This ensures the document session and view are active before sending the action message.

Also note that if you are trying to implement a screenshot-like feature, the Action_FollowUser message will not produce a response unless the editor has an active session and valid view.

jessie · March 12, 2026, 1:48am


Below is my code, refer to the PostMessage API. But the expected effect has still not been achieved. Are there any other reasons?

window.addEventListener('message', function(event) {
    let msg;
    if(typeof event.data === 'object') {
        msg = event.data;
    } else {
        msg = JSON.parse(event.data);
    }
    console.log('Received message:', event.data);

    // handle App_LoadingStatus message
    if (msg.MessageId === 'App_LoadingStatus') {
        const status = msg.Values?.Status;

        if (status === 'Initialized') {
            const frame = document.getElementById('collaboraFrame');
            frame.contentWindow.postMessage({
                'MessageId': 'Host_PostmessageReady'
            }, '*');

            console.log('Initialized, send Host_PostmessageReady');
        }

        if (status === 'Document_Loaded') {
            console.log('document load successfully, the editor is ready');
            const frame = document.getElementById('collaboraFrame');
            frame.contentWindow.postMessage({
                'MessageId': 'Action_FollowUser',
                'Values': {
                    'Follow': true
                }
            }, '*');

            console.log('Document_Loaded, send Action_FollowUser');
        }
    }
});


Other info:
Collabora version: "25.04.9.1"
Server url:http://ip:9980
Deployment method: Linux deployment
The background: Nextcloud and Collabora have been successfully installed, but the code test failed.

Topic		Replies	Views
Insert image whith PostMessage API User Support	5	136	March 13, 2025
Iframe PostMessage --> No result User Support	1	874	March 25, 2022
Add HTML Code using postMassges Development	3	66	April 16, 2025
Action_Paste Action_InsertGraphics don't seem to work User Support	2	130	February 6, 2025
PostMessage for Saving As Installation & Configuration	5	155	July 28, 2025

27 – 29 April 2026, Hamburg, Germany

Insert img whith PostMessage API

Related topics