How to insert thumbnail of uploaded attachment to a page using REST API

[Karhu12]

I am currently creating a python tool that uses the REST API to upload attachments to correct pages found from our own confluence.

I am already able to upload the attachments to correct pages, but I am having trouble finding the correct way to create a thumbnail for the uploaded documents. I want the same result when you edit the page and insert document like following:

What I have already tried is reading the HTML content of the page using the GET request on the rest API and then update the content with new thumbnail element using PUT request. I have copied the elements HTML from the source using browser developer mode and created my own template with correct page IDs, file IDs and the other miscellaneous information.

Sorry for bad formatting of this python method, but it just returns the HTML from the thumbnail to be added based on the page and file properties that is then updated to the page.

def _get_document_thumbnail_html_(self, page_id, file_id, filename, file_mod_date, file_version) -> str:        return f"""<span class="confluence-embedded-file-wrapper conf-macro output-inline" data-hasbody="false" data-macro-name="view-file">            <a class="confluence-embedded-file" href="/download/attachments/{page_id}/{filename}?version={file_version}&amp;modificationDate={file_mod_date}&amp;api=v2" data-nice-type="null" data-file-src="/download/attachments/{page_id}/{filename}?version={file_version}&amp;modificationDate={file_mod_date}&amp;api=v2" data-linked-resource-id="{file_id}" data-linked-resource-type="attachment" data-linked-resource-container-id="{page_id}" data-linked-resource-default-alias="{filename}" data-mime-type="application/binary" data-has-thumbnail="false" data-linked-resource-version="{file_version}">                <img src="/s/en_US/8100/5084f018d64a97dc638ca9a178856f851ea353ff/4.0.3/_/download/resources/com.atlassian.confluence.plugins.confluence-view-file-macro:view-file-macro-resources/images/placeholder-medium-file.png" height="250" width="200">                <span class="title">API test page build document.txt</span>            </a>        </span>""" 

 When I try to update the thumbnail using this method, this is what it looks like in the end. It seems to also lose part of the body during the update.

Is there an easier way to go about uploading the thumbnails of documents?

Edit:

According to this article part of the attributes that are not "white listed" are being removed by the APIs parser. This means that we can not manually update the page with elements that have custom defined attributes (such as the data-# which are used by the confluence elements).

Edit 2:

Upon further investigation the missing attributes are probably caused by the storage format. Using this information I was able to construct similar thumbnail with the following template:

<ac:link ac:anchor="anchor">
  <ri:attachment ri:filename="API test page document.txt"></ri:attachment>
  <ac:link-body>
    <ac:image ac:height="250" ac:width="250" ac:border="true" ac:class="confluence-embedded-file">
      <ri:url ri:value="/plugins/servlet/view-file-macro/placeholder?type=unknown&name=API test page document.txt&attachmentId={attachment id}&version={attachment version}&mimeType=application/binary&height=250"></ri:url>
    </ac:image>
  </ac:link-body>
</ac:link>

This produces following result:

When clicked it opens the following view.

This has similar interaction as the one made with editor, but it is still not quite the same.

Note. The generated thumbnail link seems to get broken when you edit the page manually after inserting the data via REST API.

Edit 3: The thumbnail seemed to get broken during editing because of relative URL. Switch the <ri/url ri:value="/plugins/servlet/..."> to <ri:url ri:value="https://your.wiki.address/plugins/servlet/..."> and it will no longer break