Ajax経由でDropboxにアップロードするときに破損したファイル

Question

Dropbox APIを使用して、Ajaxを使用してWebインターフェイス経由で特定のDropboxフォルダにファイルを送信しようとしています。

function UploadFile(token, callback) { 

    var fileName  = $('input[type=file]')[0].files[0].name, 
     fileData  = new FormData($('#file-upload')[0]), 
     dbxHeaderParams = { 
      'path': '/' + fileName, 
      'mode': { '.tag': 'add' }, 
      'autorename': true 
     }; 

    $.ajax({ 
     url: 'https://content.dropboxapi.com/2/files/upload', 
     type: 'POST', 
     headers: { 
      'Authorization': 'Bearer ' + token, 
      'Content-Type': 'application/octet-stream', 
      'Dropbox-API-Arg': JSON.stringify(dbxHeaderParams) 
     }, 
     data: fileData, 
     processData: false, 
     contentType: false, 
     success: function(result) { 
      console.log('NICE BRO'); 
      callback(); 
     }, 
     error: function(error) { 
      console.error(error); 
      callback(); 
     } 
    }); 

} 

このコードは動作します：ファイルは、私のDropboxフォルダにアップロードされていると私はそれらを開くことができ

は、ここに私のコードです。彼らは正しい名前と（ほぼ）正しいサイズを持っています。しかし、問題は、プロセス中に行が追加されるため、すべてが破損していることです。ここで

は一例です：私はこれを含む.txtファイルをアップロードする場合：

harder better faster stronger 

は一度私のDropboxにアップロード、それは次のようになります：私はこれがある

-----------------------------2308927457834 
Content-Disposition: form-data; name="file"; filename="test.txt" 
Content-Type: text/plain 

harder better faster stronger 
-----------------------------2308927457834-- 

仮定しますなぜ画像のようなファイルを開くことができないのですか？私はいくつかの解決策を試しましたが、どれも解決できません。私は間違って何をしていますか？ありがとう！

Answer 1

HTMLの関連する部分を見ると便利ですが、Fileではなく、アップロード呼び出しにFormDataオブジェクトを指定しているようです。

は、このラインを交換してみてください。これで

 fileData  = new FormData($('#file-upload')[0]), 

を：

トリックをした

 fileData  = $('input[type=file]')[0].files[0],