Using Dropbox v2 API from Browser

问题:

I'm trying to upload data to dropbox via webbrowser (FF 42.0, PhantomJS 1.9.8) and dropbox v2 api. My function looks like this

function(path, data, callback) {
        $.ajax({
            url: 'https://content.dropboxapi.com/2/files/upload',
            type: 'post',
            contentType: 'application/octet-stream',
            beforeSend: function(jqXHR) {
                jqXHR.setRequestHeader("Content-Type","application/octet-stream");
            },
            data: data,
            headers: {
                "Authorization": "Bearer " + token,
                "Dropbox-API-Arg": '{"path": "' + path + ',"mode": "add","autorename": true,"mute": false}',
                "Content-Type": "application/octet-stream"
            },
            success: function (data) {
                callback(data);
            }
        });
    }

Even I set the Content-Type at all attributes I can think of to application/octet-stream I get the following error

Error in call to API function "files/upload": Bad HTTP "Content-Type" header: "application/octet-stream
; charset=UTF-8".  Expecting one of "application/octet-stream", "text/plain; charset=dropbox-cors-hack"

Taking a look at the request in Firebug shows me that the Content-Type was really set to application/octet-stream; charset=UTF-8. When trying text/plain; charset=dropbox-cors-hack as Content-Type the sent request has text/plain; charset=UTF-8, and I get the same error message.

How can I make jquery and my browser to set the headers I need.

EDIT: Same behavior in Chrome IE works as expected

回答1:

Technically, Firefox is just adhering to the W3C XMLHttpRequest spec:

http://www.w3.org/TR/XMLHttpRequest/#the-send()-method

Sending anything other than a Blob or ArrayBufferView can cause issues with browsers attempting to encode the data in UTF-8 (to follow the spec).

The right thing to do here is to avoid sending data as a String. Here are two examples of how to avoid this behavior:

// ... file selected from a file <input>
file = event.target.files[0];
$.ajax({
    url: 'https://content.dropboxapi.com/2/files/upload',
    type: 'post',
    data: file,
    processData: false,
    contentType: 'application/octet-stream',
    headers: {
        "Authorization": "Bearer " + ACCESS_TOKEN,
        "Dropbox-API-Arg": '{"path": "/test_ff_upload.txt","mode": "add","autorename": true,"mute": false}'
    },
    success: function (data) {
        console.log(data);
    }
})

Or, if you want to send up text, you can UTF-8 encode the text before uploading yourself. A modern way to do this is using TextEncoder:

var data = new TextEncoder("utf-8").encode("Test");
$.ajax({
    url: 'https://content.dropboxapi.com/2/files/upload',
    type: 'post',
    data: data,
    processData: false,
    contentType: 'application/octet-stream',
    headers: {
        "Authorization": "Bearer " + ACCESS_TOKEN,
        "Dropbox-API-Arg": '{"path": "/test_ff_upload.txt","mode": "add","autorename": true,"mute": false}'
    },
    success: function (data) {
        console.log(data);
    }
})

回答2:

Try this...

     private void upload(object sender, EventArgs e)
     {

         OAuthUtility.PutAsync
             (
               "https://content.dropboxapi.com/1/files_put/auto/",
               new HttpParameterCollection
               {
                  {"access_token",Properties.Settings.Default.AccessToken},
                  { "path", Path.Combine(this.CurrentPath, Path.GetFileName(openFileDialog1.FileName)).Replace("\\", "/") },
                  { "overwrite","false"},
                  { "autorename","false"},
                  {openFileDialog1.OpenFile()}     
               },

               callback : Upload_Result
             );
     }