Upload files to Dropbox using a Dropbox Core API in Javascript

I am working on a simple chrome-extension that needs to upload files to the user's dropbox folder. I am using the simple AJAX requests as mentioned below to upload files, however it works for files with extensions such as .txt, .json, .c, etc i.e. files whose mime type is of type text/plain or similar type but all other file types such as pdfs, image files etc get corrupted and produce blank contents. What am I missing in uploading the files the correct way.

function startUpload()
{
    var folderPath = $(this).closest('tr').attr('path')+'/';
    var file = $("#upload_file")[0].files[0];
    if (!file){
        alert ("No file selected to upload.");
        return false;
    }

    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
        uploadFile(folderPath+file.name,evt.target.result,file.size,file.type);
    }
}

//function to upload file to folder
function uploadFile(filepath,data,contentLength,contentType){
    var url = "http://ift.tt/1NeCQNT"+filepath;
    var headers = {
        Authorization: 'Bearer ' + getAccessToken(),
        contentLength: contentLength,
    };
    var args = {
        url: url,
        headers: headers,
        crossDomain: true,
        crossOrigin: true,
        type: 'PUT',
        contentType: contentType,
        data : data,
        dataType: 'json',
        success: function(data)
        {
            getMetadata(filepath.substring(0,filepath.lastIndexOf('/')),createFolderViews);
        },
        error: function(jqXHR)
        {
            console.log(jqXHR);
        }
    };
    $.ajax(args);
}