Get Attachment Content From Rest API Forge Custom UI

Forge Forge UI Kit and Custom UI
, ,
1

Hello,
I try to use https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issue-attachments/#api-rest-api-3-attachment-content-id-get endpoint to download the file content from a Forge app. However, I could not read the content from the response appropriately. The example does not work.

import api, { route } from "@forge/api";

const response = await api.asUser().requestJira(route`/rest/api/3/attachment/content/{id}`, {
  headers: {
    'Accept': 'application/json'
  }
});

console.log(`Response: ${response.status} ${response.statusText}`);
console.log(await response.json());

How should I use the endpoint to read the file content as binary data?
Thanks for the help in advance.

1 Like
2

What you can do for now would be only , convert it to Base 64 using :

    const bufferResponse = await apiResponse.arrayBuffer();
    const buffer = Buffer.from(bufferResponse);
    return buffer.toString('base64');

Use arrayBuffer() instead of json()

Then with some mutations on the returned string, you would probably end up rendering it

But this is very dirty :frowning: You have to first load the content, transform it etc, which would be super slow:(

Not sure why with the help of forge/api we cannot render the response directly in Custom UI without a need to do all this in memory :thinking:

Full implementation would be (with some hardcoded data though, sorry about it, but you’ll get the idea )

resolver.define('downloadThumbnail', async (req) => {
    const apiResponse = await api
        .asUser()
        .requestJira(route`/rest/api/3/attachment/thumbnail/10011`, {
            headers: {
                'Accept': 'application/json'
            }
        });
    const bufferResponse = await apiResponse.arrayBuffer();
    const base64 = Buffer.from(bufferResponse).toString('base64')
    return `data:image/png;base64,${base64}`
});

And in Custom UI render the response from this function

<div>
  <img src={base64} alt="test thumbnail" />
</div>
1 Like
3

Hi,
Sorry for the late response, I just had a time to try it. Many thanks. It worked as expected. Just one question, although I could read the data correctly in base64, I could not render it because of Forge security precautions.

image
image1595×554 31.9 KB

How can I solve that one?
Kind regards,
Odin

4

Sure, I believe you have to update your manifest.yml to something like

permissions:
  scopes:
    - read:jira-work
  content:
    styles:
      - 'unsafe-inline'

Once that is done, you’ll have to run deploy and install for permissions to take effect

Hope this helps !

1 Like
5

Hımm, this was already added in the manifest.yml. Unfortunately, it did not work when I uninstalled it then reinstall as well. Maybe Atlassian has another control on rendering content from base64 :thinking:
Thanks for the help.

6

Are you able to display the base64 image into a normal html page ? Maybe the issue is with the base64 string ? Check out the string into a new html page

7

I tried it, it is actually working in a regular html page.