Using Dropbox v2 API from Browser

Question

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 application/octet-stream; charset=UTF-8 . When trying text/plain; charset=dropbox-cors-hack text/plain; charset=dropbox-cors-hack as Content-Type the sent request has text/plain; charset=UTF-8 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

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

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