Inconsistent Image Insertion Issue in OnlyOffice Plugin for Word Documents

Plugins
,
1

Hello OnlyOffice team,

I am currently developing a plugin for Word documents, where my goal is to insert an image inside a table cell using code. Here’s the snippet I’m using:

let oCell = oTable.GetCell(rowIndex, 0);
let cellContent = oCell.GetContent();
let cellParagraph = cellContent.GetElement(0);
cellParagraph.RemoveAllElements();

let oRun = Api.CreateRun();

let oDrawing = Api.CreateImage(
imgUrl,
37.2 * 36000,
33 * 36000
);

oRun.AddDrawing(oDrawing);
cellParagraph.AddElement(oRun);

However, I’ve encountered an issue where sometimes the image inserts correctly, while other times an image with a cross mark over it gets inserted. How can I resolve this issue?

image
image800×229 3.02 KB

2

I am encountering the described issue only when fetching data from an API and extracting image URLs from the API response. Occasionally, the image insertion is successful, but on other occasions, a cross is displayed instead of the image. Additionally, when I download the document, I notice that the image with a cross is initially inserted, but when the document is opened, the image is available. This problem seems to be related to a potential bug in the Office Web application for the DOCX file format. Below, I have included my complete code for reference:

> (function (window, undefined) {
> 
>   window.Asc.plugin.init = function () {
> 
>     this.callCommand(function () {
> 
>       let oDocument = Api.GetDocument();
> 
>       const apiUrl = `{Api URl}`;
> 
>       fetchData(apiUrl).then((response) => {
> 
>         let actionNote = response.actionNote;
> 
>         loadAnalystTable1Bookmark("bkAnalystTable1", actionNote);
> 
>       })
> 
>       .catch((error) => {
> 
>         console.error("An error occurred:", error);
> 
>       });
> 
>       function fetchData(url) {
> 
>         return fetch(url, {
> 
>           method: "POST",
> 
>           headers: {
> 
>             "Content-Type": "application/json",
> 
>           },
> 
>         })
> 
>           .then((response) => {
> 
>             if (!response.ok) {
> 
>               console.error("Request failed with status:", response.status);
> 
>               return null;
> 
>             }
> 
>             return response.json();
> 
>           })
> 
>           .catch((error) => {
> 
>             console.error("An error occurred:", error);
> 
>             return null;
> 
>           });
> 
>       }
> 
>       function loadAnalystTable1Bookmark(bookmarkName, actionNote) {
> 
>         let authorList = actionNote.metadata.primaryAuthor;
> 
>         let oRange = oDocument.GetBookmarkRange(bookmarkName);
> 
>         let oParagraph = oRange.GetParagraph(0);
> 
>         let oTable = oParagraph.GetParentTable();
> 
>         let authCount = 0;
> 
>         for (let rowIndex = 0; rowIndex < oTable.GetRowsCount(); rowIndex++) {
> 
>           if (authCount < authorList.length) {
> 
>             console.log("row index: ", rowIndex);
> 
>             //analyst image
> 
>            
> 
>             //this code is conflicting
> 
>             let oCell = oTable.GetCell(rowIndex, 0);
> 
>             let cellContent = oCell.GetContent();
> 
>             let cellParagraph = cellContent.GetElement(0);
> 
>             cellParagraph.RemoveAllElements();
> 
>             let oDrawing = Api.CreateImage(
> 
>               authorList[authCount].photo,
> 
>               37.2 * 36000,
> 
>               33 * 36000
> 
>             );
> 
>             cellParagraph.AddDrawing(oDrawing);
> 
>             authCount++;
> 
>           } else if (authorList.length == 0) {
> 
>             let firstCell = oTable.GetCell(rowIndex, 0);
> 
>             let secondCell = oTable.GetCell(rowIndex, 1);
> 
>             firstCell.GetContent().RemoveAllElements();
> 
>             secondCell.GetContent().RemoveAllElements();
> 
>           }
> 
>         }
> 
>         let tableRange = oTable.GetRange();
> 
>         tableRange.AddBookmark(bookmarkName);
> 
>       }
> 
>     }, true);
> 
>   };
> 
> })(window, undefined);
3

hi @ajay
Thank you for the information.
We are checking the situation and I will let you know when I get something.

Please specify the following information:

  1. version ONLYOFFICE editors.
  2. Does the issue occur with specific images?
  3. Can you provide links to the images where the issue is being reproduced?
  1. If possible, please provide the plugin. Other users may also be interested in trying out the plugin you have created!

You can upload it to some external storage and provide us with download link.

4

Hi @Nikolas ,

I am using the OnlyOffice web version and encountering an issue with all the images.It seems that the problem arises when I fetch data from the server using the JavaScript ‘fetch’ method. Strangely, when I use hardcoded image URLs or base64 encoding, everything works fine without any hitches. Additionally, the AddDrawing() method returns true. However, when I download a document containing an image with a cross symbol, the downloaded document displays the actual image without any issue. I suspect that there might be a bug causing the intermittent inability to add images when the document is opened in the online version of OnlyOffice for text documents. Furthermore, when I attempt to run the same plugin in the OnlyOffice desktop version, it throws a 405 error for the API call using the fetch method. I have provided the code to fetch data and add images above in this thread.

5

Thanks, @ajay
I gave the information to our guys :ok_hand:t3:
I will notify you as soon as there is a result.

7

@ajay

Unfortunately, we were unable to reproduce the issue.

We suspect that the issue lies with the files pointed to by the URL.
Unfortunately, we don’t have any ideas at the moment.

Could you record a video? We would like to see how it looks.

8

@Nikolas

In the provided video, when I click on my plugin’s refresh button, all the data loads correctly in the document. However, the images are not displayed initially; they only become visible after I manually refresh the document.

play video

9

@ajay
Seems like I recall a similar bug.

Please provide the following information:

  1. Which product ONLYOFFICE are you using and the version of the document server.
  2. Open your browser’s console (press F12 in Google Chrome). Check if there are any error entries in the ‘Console’ and ‘Network’ tabs. Please take screenshots.
10

@Nikolas

I am using OnlyOffice for Docs (web version) through the https://personal.onlyoffice.com/. I am not currently using the document server and have built a plugin using the document builder. I am directly uploading my add-in to Chrome extensions and starting to use it in the OnlyOffice web application.

I haven’t found any issues in the network or console.

11

@ajay
Just to clarify, can you send me your plugin for testing the issue?

If I understand correctly, the error only occurs when using the “fetch” method.

12

@Nikolas
Yes, an error occurs when I use the fetch method.

Download Plugin

1 Like
13

Hi @ajay

One of our dudes got interested in the issue and made some changes to the plugin (wtrAddin.js). Check it out.

ModifiedWordPlugin.zip

14

@Nikolas
I am unable to access it. I have requested access; please approve it.

15

@ajay
My bad. Check the access right now.

16

@Nikolas ,

Can you please check this link again: plugin It’s not working when I have multiple bookmarks. The callCommand method is called only once. Additionally, I want to call another API from the loadCompanyFinancials method (availble inside plugin) and update the bookmark value based on that API response. How can I implement this in this scenario?

17

@ajay

We have done our utmost to address the issues you’ve encountered within the forum. We even made modifications to the plugin you provided. If you still require further assistance, please don’t hesitate to reach out to dedicated support post: Get dedicated support.