Asana API - Ajaxを使ってファイルをアップロードする

Question

私はAsanaにファイルをアップロードする必要があるプロジェクトがあります。可能であれば、私はAsanaのAPIを通じてこれを行うことができるようにしたいと考えています。 Ajax Postリクエストを使用してAsanaでタスクを正常に作成することができました。 AsanaタスクにファイルをアップロードするためにAjax Postリクエストを使用する方法はありますか？ HTML FileUplaodオブジェクトから直接ファイルをアップロードしたいと考えています。これが可能なら誰でも知っていますか？

このようなJSONオブジェクトを添付ファイルAPIに投稿しようとしましたが、これは機能しませんでした。

https://app.asana.com/api/1.0/tasks/ {TASKID} /添付ファイル

{ "親"：1337、 "DOWNLOAD_URL"： "https://www.dropbox.com/s/1234567890abcdef/Screenshot.png?dl=1"、 }

私はまた、URLを使って投稿する必要はありません、私は可能であれば、FileUploadオブジェクトから直接投稿したい。

Answer 1

短い答えは、この他のスタックオーバーフローの質問をチェックすることです。これは、これを引き抜く方法のかなり良い説明があります。 sending a file as multipart through xmlHttpRequest

長い答えはこれです：

アップロードファイルは、添付のエンドポイントがContent-Type: multipart/form-dataのコンテンツを取ることを期待するので、私たちのAPIの残りのほとんどよりも「感じ」別のを持っています。

1. をあなたは、好ましくは、multipart/form-dataにそのコンテンツタイプのリクエストヘッダを設定し、また、そのヘッダにユニークになるように、キーboundaryを設定する必要がありますいくつかの主なものは、これが機能するためにあなただけの権利を取得する必要があります。ファイルを区切るために長い境界を使用する場合は、この例では1z2x3c4v5bを使用します。
2. あなたは、区切り文字の後にあなたがコンテンツ処分とコンテンツを指定するいくつかの「ヘッダ」を提供する必要が改行アップロード体まだ
3. 続く、すなわち--1z2x3c4v5b、2つのダッシュ境界でのアップロードの体を開始（すなわち、それはその名前が、そういったことが何であるか、ある画像の種類）
4. 2改行
5. ファイルの生のバイト
6. 2改行
7. 2ダッシュファイルに対して正しく型、区切り文字、および2つの最終ダッシュ、つまり--1z2x3c4v5b--

これらの機能がどのようにまとめられているかは、our Attachments documentationに記載されています。 ちょうどを完成させなければならないこの歌とダンスは、 "XHRが適切なヘッダーとボディエンコーディングを気にします"という意味の他のSO投稿の作者のものです。あなたはこれを自分自身から取り除こうと試みることができますが、私はそれがはるかに簡単なので、彼らが概説するアプローチをお勧めします。

Answer 2

私はこれを次のコードを使用して解決できました。

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); 
     }