# Add attachment in Forge Custom UI **URL:** \ **Category:** Forge UI Kit and Custom UI\ **Tags:** javascript, jira-cloud-rest-api, custom-ui, attachment, jira-cloud, rest-api\ **Created:** [August 23, 2021, 8:31pm UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243 "2021-08-23T20:31:38Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![ukaszWiniewski](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ukaszwiniewski/32/43403_2.png) [@ukaszWiniewski](https://community.developer.atlassian.com/u/ukaszWiniewski)\ **Post date:** [August 23, 2021, 8:31pm UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/1 "2021-08-23T20:31:39Z")
Hey Community! I’m trying to create a simple text file as a blob in forge Custom UI and attach it to an existing Jira issue. My code in the react component: ```auto async function AddAttachmentToIssue(){ const form = new FormData(); const blob = new Blob(['HelloWorld!'], {type : 'text/plain'}) form.append('file', blob, 'file.txt') const response = await invoke('addAttachmentToIssue', form); console.log(`AddAttachmentToIssue:`, response); } ``` And code in the resolver function definitions file: ```auto resolver.define('addAttachmentToIssue', async ({ payload, context }) => { const response = await api.asApp().requestJira(route`/rest/api/3/issue/CS-900/attachments`, { method: 'POST', body: payload, headers: { 'Accept': 'application/json', 'X-Atlassian-Token': 'no-check', } }); return await response; }); ``` I do get a response: {headers: {…}, ok: false, status: 415, statusText: “Unsupported Media Type”}.” 1. I checked if the blob file is fine so I download it and it’s ok 2. I checked if I can upload the text file to the issue (I know but I had to) and I can I have no clue why it’s not working;( ---
**Author:** ![kchan](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@kchan](https://community.developer.atlassian.com/u/kchan)\ **Post date:** [August 25, 2021, 6:31am UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/2 "2021-08-25T06:31:50Z")
Hey @ukaszWiniewski, We are aware of some issues regarding attachments and the Forge lambda/resolver. For uploading an attachment from the client-side of a Custom UI app, it may be easiest to use `requestJira` from the Custom UI bridge. This will make the request directly to the product API on the client-side, rather than via the resolver/lambda. Custom UI bridge requestJira docs: [https://developer.atlassian.com/platform/forge/custom-ui-bridge/requestJira/](https://developer.atlassian.com/platform/forge/custom-ui-bridge/requestJira/) ---
**Author:** ![ukaszWiniewski](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ukaszwiniewski/32/43403_2.png) [@ukaszWiniewski](https://community.developer.atlassian.com/u/ukaszWiniewski)\ **Post date:** [August 25, 2021, 7:09pm UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/3 "2021-08-25T19:09:58Z")
Hey @kchan! Thank you for your reply. I did as you suggest but unfortunately, I got the same result. ```auto import { requestJira } from '@forge/bridge'; import FormData from "form-data"; async function AddAttachmentToIssue(){ const form = new FormData(); const blob = new Blob(['HelloWorld!'], {type : 'text/plain'}) form.append('file', blob, 'file.txt') const response = await requestJira('/rest/api/2/issue/CS-900/attachments', { method: 'POST', body: form, headers: { 'Accept': 'application/json', 'X-Atlassian-Token': 'no-check' } }); console.log(`Response:`, response); } ``` The result in the console: Response: {headers: {…}, ok: false, status: 415, statusText: “Unsupported Media Type”, body: “”} Do you have any ideas for another solution, workaround, or know when this attachment issue might be fixed? ---
**Author:** ![kchan](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@kchan](https://community.developer.atlassian.com/u/kchan)\ **Post date:** [August 27, 2021, 12:38am UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/4 "2021-08-27T00:38:59Z")
Hey @ukaszWiniewski, I’m reaching out to the team to understand why this is happening. Will get back to you with an answer. ---
**Author:** ![kchan](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@kchan](https://community.developer.atlassian.com/u/kchan)\ **Post date:** [August 30, 2021, 7:33am UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/5 "2021-08-30T07:33:55Z")
Hi @ukaszWiniewski, Thanks for your patience. We’ve investigated the issue and found part of our code in `@forge/bridge` that doesn’t serialize `FormData` correctly. We are currently making this fix so that the next version of `@forge/bridge` will make your code snippet above work. In the meantime, could you try using the following workaround? ```auto const form = new FormData(); const blob = new Blob(["HelloWorld!"], { type: "text/plain" }); form.append("file", blob, "file.txt"); const req = new Request("", { body: form, method: "POST", }); req .text() .then((body) => { requestJira("/rest/api/3/issue/CS-900/attachments", { method: "POST", body, headers: { 'Content-Type': req.headers.get('content-type'), Accept: "application/json", "X-Atlassian-Token": "no-check", }, }); }) .then((response) => { console.log(`Response:`, response); }); ``` ---
**Author:** ![Yaroslav](https://avatars.discourse-cdn.com/v4/letter/y/3ab097/32.png) [@Yaroslav](https://community.developer.atlassian.com/u/Yaroslav)\ **Post date:** [September 7, 2021, 6:24pm UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/6 "2021-09-07T18:24:38Z")
Hello @kchan , solution with Request.text() works but only for text files. For binary images file uploaded too but it have wrong format. There is code sample for PNG image: ```auto /////////////////////////////////////////// // Create Canvas for draw and upload as image var canvas = document.createElement('canvas'); canvas.id = "canvasImage"; canvas.width = 100; canvas.height = 100; canvas.style.zIndex = 8; canvas.style.position = "absolute"; canvas.style.top = 0; canvas.style.left = 0; document.body.appendChild(canvas) var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(0, 255, 0, 1.0)"; ctx.fillRect(0, 0, 100, 100); ////////////// // Convert canvas to Blob and upload it canvas.toBlob((blob) => { const form = new FormData(); form.append("file", blob, "file.png"); const req = new Request("", { body: form, method: "POST", }); req.text().then((body) => { console.log(body); requestJira("/rest/api/3/issue/VIS-10/attachments", { method: "POST", body, headers: { 'Content-Type': req.headers.get('content-type'), Accept: "application/json", "X-Atlassian-Token": "no-check", }, }) .then((response) => { console.log(`Response:`, response); }); }); }); /////////////////////////////////////////// ``` ---
**Author:** ![naseriimahmoud](https://avatars.discourse-cdn.com/v4/letter/n/ecccb3/32.png) [@naseriimahmoud](https://community.developer.atlassian.com/u/naseriimahmoud)\ **Post date:** [September 20, 2021, 1:56pm UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/8 "2021-09-20T13:56:21Z")
hi again, Can anyone suggest a solution to this problem? @kchan ---
**Author:** ![kchan](https://avatars.discourse-cdn.com/v4/letter/k/e36b37/32.png) [@kchan](https://community.developer.atlassian.com/u/kchan)\ **Post date:** [September 27, 2021, 6:14am UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/9 "2021-09-27T06:14:08Z")
@Yaroslav @naseriimahmoud, unfortunately I’m not aware of a solution here. We will soon look into a fix for this but it doesn’t seem to be trivial (or close to trivial) so may take some time. ---
**Author:** ![ukaszWiniewski](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ukaszwiniewski/32/43403_2.png) [@ukaszWiniewski](https://community.developer.atlassian.com/u/ukaszWiniewski)\ **Post date:** [September 27, 2021, 8:50am UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/10 "2021-09-27T08:50:01Z")
Thank you @kchan. I personally will look forward to attaching the video file created using bloob. I would greatly appreciate it if you could test this case while working on it. ---
**Author:** ![ibuchanan](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ibuchanan/32/35815_2.png) [@ibuchanan](https://community.developer.atlassian.com/u/ibuchanan)\ **Post date:** [February 23, 2022, 5:52pm UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/11 "2022-02-23T17:52:11Z")
From what I can tell, this is now captured in: [[FRGE-635] - Ecosystem Jira](https://ecosystem.atlassian.net/browse/FRGE-635) Please watch, comment, and vote there. ---
**Author:** ![ibuchanan](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ibuchanan/32/35815_2.png) [@ibuchanan](https://community.developer.atlassian.com/u/ibuchanan)\ **Post date:** [February 23, 2022, 5:52pm UTC](https://community.developer.atlassian.com/t/add-attachment-in-forge-custom-ui/51243/12 "2022-02-23T17:52:17Z")