Replace operation breaks images in table OneNote (Graph API)

Question

I have todo inside table. Also table contains image. Page screenshot

I need to mark "A" as completed. According to a documentation I should perform replace action for whole table.

First I call GET /me/onenote/pages/{pageId}/content?includeIDs=true to find right id of table (see "Page content before the PATCH" ⇩).

Then I send PATCH /me/onenote/pages/{pageId}/content with body:

[
  {
    "target": "table:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{21}",
    "action": "replace",
    "content": "<table border=\"1\"><tr><td><p data-tag=\"to-do:completed\">A</p></td><td><img src=\"https://graph.microsoft.com/v1.0/me/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value\"/></td></tr></table>"
  }
]

API responds 204, and "A" is completed now. But image has been broken: updated page

How can I update a table that contains images?

Page content before the PATCH (Graph API response)

<html lang="en-US">
<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="created" content="2018-10-08T12:03:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div id="div:{9f7149ca-3f9e-4275-8fa2-a51debcdb40c}{136}" style="position:absolute;left:48px;top:115px;width:624px">
        <table id="table:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{21}" style="border:1px solid;border-collapse:collapse">
            <tr id="tr:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{22}">
                <td id="td:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{23}" style="border:1px solid">
                    <span lang="ru-RU" data-tag="to-do">A</span>
                </td>
                <td id="td:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{26}" style="border:1px solid">
                    <img id="img:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{54}" width="99" height="35" src="https://graph.microsoft.com/v1.0/users('0c2b9435-52c9-4480-a1d9-9faa92cecf51')/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value" data-src-type="image/png" data-fullres-src="https://graph.microsoft.com/v1.0/users('0c2b9435-52c9-4480-a1d9-9faa92cecf51')/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value" data-fullres-src-type="image/png" />
                </td>
            </tr>
        </table>
    </div>
</body>

Do you have tried store the Image to some Web Storage like OneDrive? — Seiya Su, Oct 10 '18 at 06:57
@SeiyaSu I don't because users can store images anywhere they want. — Anatoliy Skuratov, Oct 11 '18 at 05:49
I can reproduce this as well. Let me see what I can find out from the OneNote guys :) — Jason Johnston, Oct 11 '18 at 12:56

score 1 · Answer 1 · answered Oct 31 '18 at 12:33

Per the OneNote team, you need to do some transformation to the images before sending your PATCH.

When you do the GET for the page, the images come back with a src attribute like: https://graph.microsoft.com/v1.0/users('0c2b9435-52c9-4480-a1d9-9faa92cecf51')/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value. This value isn't actually a direct link to an image, but is a Graph request URL to get the image. This is the key problem.

Your app must make a GET on that URL to retrieve the image contents, then encode the binary image returned into base 64, then add that into the <img> tag. That should work around the problem.

Replace operation breaks images in table OneNote (Graph API)

1 Answers1