passing objects with upload

[Drew Auman]

I am using the upload in multiple places, but usually only passing one or two integers along with the uploaded document, and that works.

On this new page I am building, I need to upload the document, but with over 20 fields, and a couple collections of records.
Normally we will create an object, and JSON.stringify it to pass it to the Controller, like this...

Javascript

var obj = {};
obj.ID = 1;
obj.Name = "Joe";
var DTO = { 'DTO': obj };

$.ajax({
    type: "POST",
    contentType: 'application/json;charset=utf-8',
    url: "/Controller/Method",
    dataType: "json",
    data: JSON.stringify(DTO),
    success: function (data) {
        // do stuff
    },
    complete: function () {
        // do stuff
     }
});

Controller

public JsonResult Method(SomeClass DTO){
    // do stuff
}

This all works, but when I try to do the same thing when uploading a file, I get a null object...

Javascript

$("#contractUpload").kendoUpload({
    multiple: false,
    showFileList: false,
    localization: {
        select: GetUploadSelectText(),
        dropFilesHere: "Drop File Here"
    },
    async: {
        saveUrl: '/Contract/UploadFile',
        autoUpload: true
    },
    select: function (e) {
        // check file types
    },
    upload: function (e) {
        // get values from page into a DTO
        var SaveContract = {};
        SaveContract.bdID = $("#hidBDID").val();
        SaveContract.DocumentType = $("#hidContractType").val();

        //billing terms
        var billingTermsViewModel = {};
        billingTermsViewModel.ContractID = window.billingTermsModel.ContractID;

        //save deleted rows
        var removedBillingTerms = [];
        $.each(window.removedBillingTerms.data(), function (index, value) {
            var removedBillingTermsItem = {};
            removedBillingTermsItem = value.ID;
            removedBillingTerms.push(removedBillingTermsItem);
        });
        billingTermsViewModel.RemovedBillingTerms = removedBillingTerms;

        //look through any rows that have been updated and send the updates to the view model

        var directBillingTerms = [];
        $.each(window.dataSourceDirectBillingTerms.data(), function (index, value) {
            if (value.dirty == true || value.ID == 0) {
                var directBillingTermsItem = {};
                var stipulatedTermItem = {};
                directBillingTermsItem.ID = value.ID;
                directBillingTerms.push(directBillingTermsItem);
                value.dirty = false;
            }
        });

        var indirectBillingTerms = [];
        $.each(window.dataSourceIndirectBillingTerms.data(), function (index, value) {
            if (value.dirty == true || value.ID == 0) {
                var indirectBillingTermsItem = {};
                var stipulatedTermItem = {};
                indirectBillingTermsItem.ID = value.ID;
                indirectBillingTerms.push(indirectBillingTermsItem);
                value.dirty = false;
            }
        });

        billingTermsViewModel.RemovedBillingTerms = removedBillingTerms;
        billingTermsViewModel.DirectBillingTerms = directBillingTerms;
        billingTermsViewModel.IndirectBillingTerms = indirectBillingTerms;
        SaveContract.BillingTermsViewModel = billingTermsViewModel;

        var DTO = { 'DTO': SaveContract };

        e.data = { doc: e.files[0].rawFile, DTO: JSON.stringify(DTO) };
    },
    success: function(data) {
        //do stuff
    },
    error: function (e) {
        //do stuff
    }
});

Controller

[HttpPost]
public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> files, HttpPostedFileBase doc, SaveContract  DTO) {
    // when i get here, DTO is null
}

When I get to the controller, my object is null. 

Is there a way to pass an object like this through the upload?

[Dimiter Madjarov]

Hi Drew,


If you would like to pass objects as additional data to the server, I would suggest you to stringify them and send them as a collection of strings, which could be further manipulated on the back-end.
E.g.

function onUpload(e) {
    e.data = {};
    e.data["additional[0]"] = "test";
    e.data["additional[1]"] = 5;
    e.data["additional[2]"] = JSON.stringify({
        prop1: "test",
        prop2: 5
    });
}

public ActionResult Save(IEnumerable<HttpPostedFileBase> files, string[] additional)
{ ... }

A single object could also be stringified.
E.g.

function upload(e) {
    e.data = {};
    e.data["additional"] = JSON.stringify({
        prop1: "test",
        prop2: 5
    });
}

public ActionResult Save(IEnumerable<HttpPostedFileBase> files, string additional)
{ ... }

I hope that this information was helpful for you. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[David Yardy]

I am doing the exact scenario above and i still get null values for additional parameter server side in c#
e.data = {};
     e.data["additional"] = JSON.stringify({
         prop1: "test",
         prop2: 5
     });

and server side
public JsonResult saveFile(IEnumerable<HttpPostedFileBase> files, string additional)

additional is always null


i am using this for the upload

//kendo uploader
$("#files").kendoUpload({
    template: kendo.template($('#fileTemplate').html()),
    async: {
        saveUrl: "/SupplierDueDiligence/Home/saveFile",            
        removeUrl: "remove",
        autoUpload: false
    },
    select: function(e){
        setTimeout(function () {
            kendoUploadButton = $(".k-upload-selected");
            kendoUploadButton.hide();
        }, 1);
    },
    upload: onUpload,        
    files: initialFiles,
    success: onSuccess
});

[Dimiter Madjarov]

Hello David,


I covered the question in the support thread on the same topic. Please take a look at it.

Regards,
Dimiter Madjarov
Telerik