How to attach image(s) to a new Trello card from t

Question

While adding a new card with the trello_client.js library, I want to attach an image or more. The documentation only mentions that fileSource is "A file".

Data URI didn't work as is, and blobs are usually appended to FormData objects so I'm not sure how to approach this and didn't find working examples.

And is it even possible to attach multiple files along with the card creation, or only later, by separate posts here?

Answer 1

The Trello API expects either a URL to be attached, or a file encoded as multi-part/formdata.

I've put together a series of examples on different ways you can attach files to a card using Javascript. You can check it out here: https://glitch.com/~trello-attachments-api. To see the example project running live, click "Preview App."

Answer 2

The client.js library doesn't support attaching file attachments. You'll need to use a standard XHR and FormData object.

Here's some sample code: https://plnkr.co/edit/PjJsfMgJuJaM5A83RAiW

The relevant bits of HTML:

<input type="file" id="chooser"/>
<button onclick="upload();">Upload</button>

and the javascript:

// Setup
var TOKEN = "";
var KEY = "";
var CARD = "";

function upload() {
  var formData = new FormData();

  formData.append("token", TOKEN);
  formData.append("key", KEY);

  // HTML file input, chosen by user
  formData.append("file", document.getElementById('chooser').files[0]);

  var request = new XMLHttpRequest();
  request.open("POST", "https://api.trello.com/1/cards/" + CARD + "/attachments");
  request.send(formData);
}