File is not an object error while trying to attach a picture

[anon84143964]

Heyho

I am trying to attach an image to a task with node and java script. The image is send by client from c# as an base64 converted byte array.

Code in c# to covnvert texture too image byte array:

            byte[] imageArray = img.EncodeToPNG();
            var result = Convert.ToBase64String(imageArray);

            using (var streamWriter = new StreamWriter(request.GetRequestStream())) {
                string json = "{" + $"\"base64\":\"{result}\"" + "}";
                streamWriter.Write(json);
            }

And this is the code from the endpoint.

var base64 = req.body.base64.toString();
  
  const form = new FormData();
  form.append('file', 'data:image/png;name:"screenshot.png;base64,' + base64);
 
  const options = {
    method: 'POST',
    headers: {
      accept: 'application/json',
      authorization: `Bearer ${token}`
    }
  }

options.body = form;

const Response = await fetch(`https://app.asana.com/api/1.0/tasks/${taskId}/attachments`, options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

And thats the error I get…

{
  errors: [
    {
      message: 'file: File is not an object',
      help: 'For more information on API status codes and how to handle them, read the docs on errors: https://developers.asana.com/docs/errors'
    }
  ]
}

If I change the name of form data, from ‘file’ to ‘File’ it cause an error message “File: Missing Input”. Even adding the quotes to the name like ‘"file"’ does not make it work. I have read all the forum posts on the subject and unfortunately no one has helped me. I would be very grateful if someone would help!

[Bastien_Siebman]

My colleague Dorian successfully used this endpoint recently let me call him for help

[Dorian.J]

Hello Jana, I did it from apps script to import a GSheets as a pdf file into an Asana task with blob object.
This link was usefull, I hope it can help you : Uploading attachment from blob plus parent parameter

[anon84143964]

For all those who have the same problem as me - here are two things that made my code work:
first, the object must be created with the class constructor (jsut say this because i often see people creating these form as js objects). In addition, the base64 string must be entered as a blob in the from data, thanks @Dorian.J for this hint!

 const formData = new FormData();
 formData.append('file', blob, validAttachment.filename);

Then (unlike described in the developer api documentation) the name parameter must be omitted (in case the base64 string is transferred via the request and the file is not loaded from the filesystem). Rather, the filename must be specified as part of the form field (as you can see above)

 const base64Response = await fetch(`data:${validAttachment.contentType};base64,${validAttachment.content}`);
 const blob = await base64Response.blob();

Content = base64 string and content type = image/png

Furthermore the parent must be appended as form field too. The following request did not throw an error, but also did not append the image to the task.

options.body = formData;
await fetch(`https://app.asana.com/api/1.0/tasks/${createdTaskId}/attachments`, options)
   .then(res => res.json())
   .catch(err => console.error(err));

But this way the image is attached

formData.append('parent', createdTaskId);
options.body = formData;
await fetch('https://app.asana.com/api/1.0/attachments', options)
   .then(res => res.json())
   .catch(err => console.error(err));

I hope this helps

[Phil_Seeman]

Fantastic, @anon84143964 - thanks for posting the detailed solution!