Dropbox API: Sending Data Via Ajax to Controller

Question

I am using the Dropbox API JavaScript Chooser and want to return the data from the response into my Controller

The Javascript Options for the Dropbox API

options = {
    success: function (files) {
        $.ajax({
            url: '/FileTransfer/FileData',
            type: "POST",
            dataType: "json",
            //data: JSON.stringify(files[0]),
            data: files,
            success: function (result) {}
        });
    },
    cancel: function () {},
    linkType: "preview", 
    multiselect: true
};

Controller Action

My controller action currently doesn't do anything at the moment but will eventually cache the output data into a model once i can get data to be passed into it, which is hence my problem.

    public JsonResult FileData(string model)
    {
        return Json(new { success = true });
    }

and what issue exactly are you facing? Do you get an error? I don't know what type of variable "files" is (because you haven't said) but it will need to be a string otherwise the controller method won't accept it. — ADyson, Jul 12 '16 at 08:55
yes, you've already said that. Struggling how, _exactly_? Are you unsure what data to send, or how to send it? When you run the code you've posted, do you get any errors? What behaviour are you expecting, versus what actually happens? — ADyson, Jul 12 '16 at 10:12
I am struggling to return any data from it into my Controller. I dont get any errors. If i put alert(files) after success: function (files) { i get "[object Object]" which is an array ie files[0] shows the dropbox return. im not sure myself what the variable is. — Frazer, Jul 12 '16 at 10:12
`console.log(JSON.stringify(files)` should give you a better idea of what's in the files object. But if it's an array as you mention, you'll likely have a problem because your controller wants to receive a single string. — ADyson, Jul 12 '16 at 10:14
Plus, at the moment your ajax function is not doing anything with the feedback it gets from the controller (if any). Amend it slightly so that the "success" property is `function(result) { console.log(JSON.stringify(result);}` and add an extra property "error" defined as `function (jQXHR, textStatus, errorThrown) { alert("An error occurred: " + jQXHR.status + " " + textStatus + " " + errorThrown); }` these will help to understand if the ajax call is successful or not — ADyson, Jul 12 '16 at 10:17

score 0 · Answer 1 · answered Jul 12 '16 at 13:34

ADyson`s hints have helped me solve my problem, thank you

Altered code below, note the change to data: and then deserialised in the Controller

Javascript

options = {
    success: function (files) {
        $.ajax({
            url: '/FileTransfer/FileData',
            type: "POST",
            dataType: "json",
            data: { result : JSON.stringify(files) },
            //data: files,
            success: function (result) {
                $("#FileList").load('/FileTransfer/Cloud');
                console.log(result);
             },
            error : function (jQXHR, textStatus, errorThrown) {
                //alert("An error occurred: " + jQXHR.status + " " + textStatus + " " + errorThrown);
            }
        });
    },
    cancel: function () {},
    linkType: "preview", 
    multiselect: true
};

Controller

    public JsonResult FileData(string result)
    {
        var convertedResult = JsonConvert.DeserializeObject<List<DropboxFile>>(result);

        CacheEntity(convertedResult);

        return Json(new { success = true });
    }

glad I could help. If you want to make it a bit cleaner, it might work if you change `public JsonResult FileData(string result)` to `public JsonResult FileData(List result)` in your controller, and change `data: { result : JSON.stringify(files) }` to `data: { result : files }`. I think that should mean the deserialization is done automatically for you. Or it might be simply `data: files`. I can never remember without trying it! — ADyson, Jul 12 '16 at 17:12

score 0 · Accepted Answer · answered Jul 14 '16 at 08:54

Refactored code following suggestion

Javascript

options = {
    success: function (files) {
        $.ajax({
            url: '/FileTransfer/FileData',
            type: "POST",
            dataType: "json",
            data: { result : files},
            success: function (result) {
                $("#FileList").load('/FileTransfer/Cloud');
            },
            error : function (jQXHR, textStatus, errorThrown) { }
            });
        },
        cancel: function () {
    },

    linkType: "preview", 
    multiselect: true 
};

Controller

public JsonResult FileData(List<DropboxFile> result)
{
    CacheEntity(result);

    return Json(new { success = true });
}

Dropbox API: Sending Data Via Ajax to Controller

2 Answers2