Help creating app that shows attachments

Hello everyone,

I’m trying to build an app that shows all the attachments of a Jira project.

I have managed to display the name, size and user of the attachment using this endpoint: https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issue-attachments/#api-rest-api-3-attachment-content-id-get

Now I would like to be able to download the attachment from a button I have created in the user interface.

Please, can anyone give me a hint or clue on how to do this?

Thank you!
Jordi

@JordiRomera This is a simple example component using UI Kit that enables you to download an attachment. Ensure you provide the correct contentId and filename (including the extension) when calling the download function.

import React, { useState } from "react";
import { Button } from "@forge/react";
import { requestJira } from "@forge/bridge";

const FileDownloader = () => {
  const [loading, setLoading] = useState(false);

  const downloadFile = async (contentId) => {
    setLoading(true);
    try {
      const response = await requestJira(
        `/rest/api/3/attachment/content/${contentId}`
      );

      if (!response.ok) throw new Error("Failed to fetch the file");

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "downloaded-file.pdf"; // Change file name/extension as needed
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (error) {
      console.error("Download error:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Button
        onClick={() => {
          const contentId = 10000;
          downloadFile(contentId);
        }}
        isLoading={loading}
      >
        {loading ? "Downloading..." : "Download File"}
      </Button>
    </>
  );
};

export default FileDownloader;

Hello Kashsingh :grinning:

Thank you for providing the code. It has been quite helpful in my efforts to build an application that allows users to view, download, and delete attachments from a Jira project.

I have successfully integrated this functionality into my code, and there are no errors during the app deployment. However, when I click the ‘Download’ button, a pop-up appears with the following message:

‘A page inserted at localhost:800 says: Error downloading attachment.’

Here is the URL I am attempting to access: https://api.atlassian.com/ex/jira/e3286b0a-f328-48e9-83b0-be2001e561bb/rest/api/3/attachment/content/10000.

The error message I receive is as follows:

{  
  "Error message": ["You are not allowed to view the attached file with id: 10000"],  
  "Error": {}  
}

I suspect that this issue is not a bug in either the frontend or backend; rather, it appears to be a permissions issue within my Jira project.

I am using a user account with organization admin permissions, and this user is also included in the project admin role within the project permission scheme.

Could you please assist me in identifying the reason I am unable to download the attachments?

Thank you very much!
Jordi

Hi @JordiRomera,

As suggested earlier, you would need to dynamically pass the contentId of the attachment to this downloadFile function which is done statically in my example via onClick event of the the button. Here the contentId is 10000 which might not be present in your instance thus the error.

Thank you very much @kashsingh :slight_smile:

Now it works. I really appreciate your advices. :slight_smile:

1 Like

@JordiRomera Please mark the thread as answered so that others can benefit from the answer as well.

1 Like

Hello Kashsingh :slight_smile:

I have another question regarding this app that I am building for downloading all the attachments in a Jira project.

I am building this app with a frontend file index.jsx and a backend file index.js.

Now I want to paginate through all the attachments. As you know, only the first 50 attachments are displayed.

I would like to know how to paginate. Could you please show me an example of how to do this?

Regards,
Jordi

Jira cloud API has a pretty standard pagination interface mostly for all list endpoints

?startAt={offset}&maxResults=50

Thank you Alexandr :slight_smile:

But I would need to create the buttons to allow the user to paginate?

Sorry, maybe it’s a silly question but I am just starting to develope :wink:

Regards,
Jordi

ChatGPT your best friend :slight_smile:

1 Like

Thank you Alexandr and long life to IA!! :slight_smile:

Hello @Alexandr, @kashsingh

I am using this endpoint to paginate over all the results: https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issue-search/#api-rest-api-3-search-get

This endpoint is deprecated and I think I should use the following endpoint: https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issue-search/#api-rest-api-3-search-jql-get

What are the risks of using the deprecated endpoint for pagination? If I want to use the new endpoint that is not deprecated, any ideas on how to use the pagination?

The deprecated endpoint uses startAt but the new endpoint uses nextPageToken.

Thanks and regards,
Jordi