Upload attachment

Confluence Development Confluence Cloud
, , ,
1

Hello,

I’m trying to upload an attachment when editing a macro and I cannot. I’m using the exact piece of code given in documentation(https://developer.atlassian.com/static/connect/docs/latest/javascript/module-request.html), changing the pageId, of course:

// Upload an attachment to a Confluence entity.
var fileToUpload = document.getElementById("fileInput").files[0];

AP.request({
  url: '/rest/api/content/123456/child/attachment',
  type: 'POST',
  contentType: 'multipart/form-data',
  data: {comment: 'example comment', file: fileToUpload},
  success: function(responseText){
    alert(responseText);
  }
});

I tried with PUT too.

The only error I have is “Internal server error”, and in the HTML: “If there are no known problems and your page hasn’t appeared again in 5-10 minutes then please create a support request for assistance.” So here I am.

The page already exists, so that should not be the problem.

3

Hi @miguelangel.garcia,

This should be bug with the endpoint.
I can replicate this when using text file.
It work fine if using image file.

4

Hmmmm… May be, because I tried to upload an SVG (XML).

I will try with other formats as soon as I can.

5

I have a new approach:

var payload = btoa((new XMLSerializer()).serializeToString(content));
_AP.request({
    url: '/rest/api/content/' + _pageId + '/child/attachment',
    type: 'PUT',
    contentType: 'multipart/form-data',
    data: {comment: comment, file: payload},
    success: function(responseText){
       // whatever
    },
    error: function(xhr, statusText, errorThrown) {
        console.log("Second try");
        _AP.request({
            url: '/rest/api/content/' + _pageId + '/child/attachment',
            type: 'PUT',
            contentType: 'multipart/form-data',
            data: {file: payload},
            success: function(responseText){
                // whatever
            },error: function() {
                console.log("Third try");

                var attachment = { fileName : "whatever.png", contentType : 'image/png'};
                var params = [
                    _pageId,
                    attachment,
                    payload
                ];
                _AP.request(
                    {
                        url: '/rpc/json-rpc/confluenceservice-v2/addAttachment',
                        type: 'POST',
                        data: JSON.stringify(params),
                        contentType : 'application/json;charset=UTF-8',
                        success: // whatever
                    });
//...

The first try fails; the second try, removing the comments, fails too. The third try, using the deprecated api works fine.

_pageId is a number, content is a XML object, but it is serialized to string as “payload” variable.

The only difference I see is that the deprecated api requires the filename and contentType in order to work, but reading the documentation I do not know how to set the filename. I tried with the “fileName” variable, but the result was the same.

I can bypass this by supossing this is an API error, and maintaining the fallback method, but I fully dislike this kind of actions and I’d prefer fix the REST API method in order to work fine.

1 Like
6

Hi,
I use the same part:

var actionData = {
            comment: "check",
            file: files[0],
            minorEdit: true,
            atl_token: token
        };
        AP.request({
            type: 'PUT',
            headers: {
                "X-Atlassian-Token": "nocheck"
            },
            data: actionData,
            experimental: true,
            cache: false,
            contentType: 'multipart/form-data',
            url: "/rest/api/content/" + PageId +
                "/child/attachment",
            success: function (data, status, response) {
                for (var pair of actionData.entries()) {
                    console.log(pair[0] + ', ' + pair[1]);
                }
                console.log("SUCCESS", data, status, response);
            },
            error: function (response) {
                console.log(response);
            }
        });

And every time have a issue: net::ERR_ACCESS_DENIED
But it is not browser extension. After err I see: [Simple-XDM] Failed to validate origin: https://<>.atlassian.net
But i have

"READ",
    "WRITE",
    "DELETE",
    "SPACE_ADMIN",
    "ADMIN",
    "ACT_AS_USER"

I lost 2 days for resolve it and I can’t. Maybe You or someone else know solution or can help me.

7

Hi, Did you found solution?

8

Hi,
I try to create new file object and it can work:

 var uploadFile = new File([file], newFileName, {
 type: file.type,
 });
 var uploadData = {comment: “test attachment”, file: uploadFile};