Not able to add attachment to the issue using Forge app

Forge
,
1

Hello Community!,
I am developing one JIRA cloud plugin using Forge, where I am fetching data from 3rd party API and using those data I am creating JIRA tickets. I also need to attach a csv file to each issue created but while calling issue attachment API I am getting this error :

INFO    11:40:55.703Z Error TypeError: function FileHandle(vol, fd) {
        this.vol = vol;
        this.fd = fd;
    } could not be cloned.

Code snippet that I am using :

 import { render, Text, Button } from '@forge/ui';
 import api, { route } from '@forge/api';
 import FormData from "form-data";
 const fs = require("fs");
 
const App = () => {

  const handleSubmit = async () => {
     fs.writeFileSync("sample.txt", "Hello World!");
     const fileStream = fs.createReadStream("sample.txt");
     const form = new FormData();
     form.append('file', fileStream);
    
     const response = await api.asApp().requestJira(route`/rest/api/3/issue/TEST-1/attachments`, {
         method: 'POST',
         body: form,
         headers: {
             'Accept': 'application/json',
             'X-Atlassian-Token': 'no-check'
         }
     });
  }

  return (
    <Fragment>
      <Text>Test Attachment</Text>
      <Button text='Submit' onClick={handleSubmit} />
    </Fragment>
  );
};

export const run = render(
  <GlobalPage>
    <App />
  </GlobalPage>
);

while searching for the resolution I found one community question where someone asked to directly create object of File class and pass it to formdata instead of creating readStream. So, I tried replacing the formdata creation with following code :

const form = new FormData();
const file = new File(["Hello World!"], "sample.txt")
form.append("file", file)

while using this code I am getting Error :

ERROR   12:34:22.169Z File is not defined
ReferenceError: File is not defined
    at Object.handleSubmit [as onSubmit] (index.js:36927:18)
    at index.js:32965:60
    at asyncMap (index.js:32947:30)
    at async index.js:32968:29
    at async asyncMap (index.js:32947:24)
    at async index.js:33030:23
    at async asyncMap (index.js:32947:24)
    at async index.js:32968:29
    at async index.js:32453:17

any solution or workaround would be great help!

2

Because forge-ui is not running in the browser, but actually in a environment similar to nodejs, browser APIs like file are not available.

The README of the form-data library you are using explains how to use it to upload files: form-data - npm.

In your case, it could be similar to:

form.append("file", Buffer.from("Hello World!"), {filename: "sample.txt"})

(untested)

3

Hi @FabianSiegel1 ,
thanks for the reply,
I tried your solution but still I am getting below error :

INFO    09:51:08.405Z Error TypeError: function () { [native code] } could not be cloned.
4

hello dear did you reach for a solution? , if you could help me , i am trying to add a button which allow us to upload a pdf file type only , could you help which packages shoulld i use and what to write in the index file ? thanks

5

Hi @omarmohamedfathi ,
Still I have not found any solution
I found one open ticket in ecosystem : [FRGE-114] - Ecosystem Jira

6

Do we have any update on this?

7

hello, I’m able to add an attachment doing like this:

onst requestUrl = route`/rest/api/3/issue/${issueIdOrKey}/attachments`;
 const response = await api.asApp().requestJira(requestUrl, {
  method: 'POST',
  headers: {
    'X-Atlassian-Token': 'nocheck',
    ...form.getHeaders()
  },
  body: form.getBuffer()
});
8

How were you able to create the form in the first place? The Error TypeError: function () { [native code] } could not be cloned. comes whenever I try to create the form object before I’m able to make the post request.