0

I have a project that requires file uploads into Asana. I would like to be able to do this through Asana's API if possible. I have been able to successfully create tasks in Asana using Ajax Post requests. Is there anyway to use an Ajax Post request to upload a file to an Asana task? I would like to be able to upload files straight from an HTML FileUplaod Object. Does anyone know if this is possible?

I have tried Posting an JSON object like this to the attachments API, but this did not work.

https://app.asana.com/api/1.0/tasks/{taskID}/attachments

{ "parent": 1337, "download_url": "https://www.dropbox.com/s/1234567890abcdef/Screenshot.png?dl=1", }

I also don't want to post using a url, I want to post directly from the FileUpload object, if possible.

Luke Gatchell
  • 81
  • 1
  • 3

2 Answers2

0

The short answer is to check out this other stack overflow question, which has a pretty good description of how to pull this off. sending a file as multipart through xmlHttpRequest

The long answer is this:

Uploading files has a different "feel" than most of the rest of our API, because the attachments endpoint expects to take content of Content-Type: multipart/form-data. There are several main things you have to get just right for this to work:

  1. You have to set that Content-Type request header to multipart/form-data and to also in that header set the key boundary to be a unique, preferably long boundary to delimit the file, let's use 1z2x3c4v5b for this example.
  2. You start the upload's body with 2 dashes and the boundary, i.e. --1z2x3c4v5b, followed by a newline
  3. Still in the upload body, after the delimiter you have to provide some "headers" specifying Content-Disposition and Content-Type correctly for the file (i.e. what type of image it is, what its name is, that sort of thing)
  4. 2 newlines
  5. The raw bytes of the file
  6. 2 newlines
  7. 2 dashes, the delimiter, and 2 final dashes, i.e. --1z2x3c4v5b--

Please note how all these features come together in the example in our Attachments documentation. This song-and-dance, which has to be done just right is what the author of that other SO post meant with "XHR will take care about proper headers and request body encoding". You can attempt to pull this off yourself, but I would recommend the approach they outline because it's by far the easiest.

Community
  • 1
  • 1
Matt
  • 10,434
  • 1
  • 36
  • 45
0

I was able to solve this using the following code.

    function addAttachment(taskID)
        {
            var data = new FormData();
            data.append("file", document.getElementById("fileUploader").files[0]);

            var xhr = new XMLHttpRequest();

            xhr.addEventListener("readystatechange", function () {
              if (this.readyState === 4) {
                console.log(this.responseText);
              }
            });

            xhr.open("POST", "https://app.asana.com/api/1.0/tasks/"+taskID+"/attachments");
            xhr.setRequestHeader("authorization", "Bearer <access-token>");

            xhr.send(data);
        }
Luke Gatchell
  • 81
  • 1
  • 3