Fetch api can't be used for uploading Confluence files

Forge Forge Platform and Tools
, , , ,
3

Hi @TomMoors,
it is possible to specify the content-type since a few days. If you now create the form-data-payload manually, you can upload attachments in Confuence.
With this source code we are able to upload attachments.

SomeAction.js

import { v4 as uuidv4 } from 'uuid';
import { requestConfluence } from "@forge/bridge";
import {
    generateFormData
} from "./index";
.....
let dataForm = {
	id : "some-id",
	name : "some-name",
	...
}
let attachmentName = dataForm.id + ".dataform.json"
let requestUrl = `/wiki/rest/api/content/${pageId}/child/attachment`;
let boundary = "DataForms-" + uuidv4();
const json = JSON.stringify(dataForm);
let formData = generateFormData(attachmentName, json, dataForm.name, boundary);
requestConfluence(requestUrl,
		{
				method: "PUT",
				body: formData,
				headers: {
						'Accept': 'application/json',
						'X-Atlassian-Token': 'no-check',
						'content-type': 'multipart/form-data; boundary=' + boundary
				},
				credentials: 'include'
		}).then(response => { .....
...

and the index.js

...
export const generateFormData = (attachmentName, dataFormJson, comment, boundary) => {
    let newLine = "\r\n";
    // encapsulation boundary two hyphen characters + the boundary param https://www.w3.org/Protocols/rfc1341/7_2_Multipart.html
    let boundaryMarker = "--";
    let formData = boundaryMarker + boundary + newLine +
        "Content-Disposition: form-data; name=\"file\"; filename=\"" + attachmentName + "\"" + newLine +
        "Content-Type: application/dataforms" + newLine + newLine +
        dataFormJson + newLine +
        boundaryMarker + boundary + newLine +
        "Content-Disposition: form-data; name=\"fileName\"" + newLine + newLine +
        attachmentName + newLine +
        boundaryMarker + boundary + newLine +
        "Content-Disposition: form-data; name=\"title\"" + newLine + newLine +
        attachmentName + newLine +
        boundaryMarker + boundary + newLine +
        "Content-Disposition: form-data; name=\"comment\"" + newLine + newLine +
        comment + newLine +
        boundaryMarker + boundary + newLine +
        "Content-Disposition: form-data; name=\"minorEdit\"" + newLine + newLine +
        "true" + newLine +
        boundaryMarker + boundary + boundaryMarker + newLine
    return formData
}
....

I hope the source code helps.

6 Likes