slack apiに画像送信

Question

canvasに表示された画像を取得し、その画像を投稿したいのですがうまくいきません。
postするとinvalid_form_dataとエラーメッセージが帰ってきます。

原因がわかりません。教えていただけると嬉しいです。

function imgUpload() {
  var canvasImage = $("#can").get(0);

  var originalBinary = canvasImage.toDataURL("image/jpeg");
  var originalBlob = base64ToBlob(originalBinary); 
  var formData = new FormData();
  formData.append("file", originalBlob);
  var data = {
    token:"",
    channel: '#general',
    username: 'bot',
    file:formData
  };

  $.ajax({
      type: "POST",
      url: POST_URL,
      data: data,
      dataType: "json",
      processData: false,
      error: function (XMLHttpRequest) {
          console.log(XMLHttpRequest);
          alert("アップロードに失敗しました");
      },
      success: function (res) {
          if(res !== "OK") {
              console.log(res);
              alert("アップロードに失敗しました");
          } else {
              alert("アップロードに成功しました");
          }
      }
  });
}

// 引数のBase64の文字列をBlob形式にする
function base64ToBlob(base64) {
  var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
        data = window.atob(base64Data), // base64形式の文字列をデコード
        buff = new ArrayBuffer(data.length),
        arr = new Uint8Array(buff),
        blob,
        i,
        dataLen;
  // blobの生成
  for (i = 0, dataLen = data.length; i < dataLen; i++) {
      arr[i] = data.charCodeAt(i);
  }
  blob = new Blob([arr], {type: 'image/jpeg'});
  return blob;
}

Answer 1

json で post しているからだと思いますよー。

以下、公式資料です。

invalid_form_data
The method was called via a POST request with Content-Type application/x-www-form-urlencoded or multipart/form-data, but the form data was either missing or syntactically invalid.

https://api.slack.com/methods/files.upload