CODEWITHSUNDEEP
trello
Chad DeShon
Chad DeShon

Reputation: 4782

Trello attachment serving wrong Content-Type when attachment uploaded via the API

I am using the Trello API to upload (and attach) files to a card.

I make a POST to https://api.trello.com/1/cards/my-card-id/attachments

Message body is JSON

{ file: file_contents, 'BuildSheet.html': filename, mimeType: 'text/html' }

file_contents is a string that contains the body of the file I want to attach.

That works. The file gets uploaded and attached. When I fetch the card data, this is what I see regarding this attachment.

{"id":"58a496bc751c0c2fa260630f",
 "bytes":3291,
 "date":"2017-0215T17:58:20.881Z",
 "edgeColor":null, 
 "idMember":"55240806b8ca85db897253c4",
 "isUpload":true,
 "mimeType":"text/html",
 "name":"BuildSheet.html",
 "previews":[],
 "url":"https://trello-attachments.s3.amazonaws.com/589ca323806c1d80cc03ea12/589ceda619d5936e8428f15b/1f62074b6700e61e611a90beaa8c2c73/Upload"}

You can see that mimeType is set correctly. name is also correct. However the url doesn't use the filename like it does if you upload from inside the UI. So the file doesn't have a .html extension.

When I download the file, it contains this header

Content-Type: application/octet-stream

It should be text/html. This causes the browser to download the file instead of display it.

Am I doing something wrong? Has anyone else had this problem?

Additionally is there a way to get Trello to use the file name when it constructs the url?

Upvotes: 2

Views: 1219

Answers (3)

Emiswelt
Emiswelt

Reputation: 4009

It seems like the Trello API ignores the mimeType parameter, and instead uses the Content-Disposition parameter in the response body.

A body like the following works:

------WebKitFormBoundarydjg0lJJiuTZmCppw
Content-Disposition: form-data; name="file"; filename="image.png"
Content-Type: image/png

Here is the corresponding code, using the node request library:

async function attachFileToTrelloCard(id: string, file: Buffer, fileName: string, mimeType: string) {
  const options = {
    method: 'POST',
    url: `https://api.trello.com/1/cards/${id}/attachments`,
    formData: {
      file: {
        value: file,
        options: {
          filename: fileName,
          contentType: mimeType
        }
      },
      token: process.env.TRELLO_API_TOKEN,
      key: process.env.TRELLO_API_KEY,
      name: fileName,
      mimeType
    }
  }

  return await request(options)
}

Upvotes: 2

Karl Pokus
Karl Pokus

Reputation: 810

{ file: file_contents, 'BuildSheet.html': filename, mimeType: 'text/html' }

Have you tried using the key name? reference

Upvotes: 0

Sangbok Lee
Sangbok Lee

Reputation: 2228

When I attach a file or url to a Trello card, I use POST with url only, like this (JavaScript):

var id = 'something';
var attach = 'https://www.cs.tut.fi/~jkorpela/forms/file.html';

var payload = {"url": attach};
var blob = new Blob([JSON.stringify(payload)], {type: 'application/json'});
var url = 'https://api.trello.com/1/cards/'+id+'/attachments?key='+API_KEY+'&token='+TOKEN;

var xhttp = new XMLHttpRequest();   
xhttp.open("POST", url, true);
xhttp.send(blob);

And after this when I get the JSON of the card, It's something like this:

{"id":"xxx...", ... 
 "actions":[{
   "id":"yyy...",
   "idMemberCreator":"...",
   "data":{
     "board":{ ...
     "attachment":{
       "url":"https://www.cs.tut.fi/~jkorpela/forms/file.html",
       "name":"https://www.cs.tut.fi/~jkorpela/forms/file.html",
       "id":"zzz..."}}, ...

You can get cards' JSON via adding .json at the end of the url. You can see name is the same as url but no mimeType here. And it's nowhere found in the documentation. In which way did you 'fetch the card data?' If you use JavaScript, the above code maybe help you.

And as for customization of the url of cards, I don't know anything and I guess it's impossible.

Upvotes: 0

Related Questions