Kendo upload does not post object with complex type property

Question

I am using kendo upload control in Asp.net MVC application. On click event of a OK button i want to upload a file along with some metadata ( Note this OK button is not Upload control's OK button, its some other button on UI)

So i have set AutoUpload to false.

Then i trigger the upload event via javascript. I also want to save meta data along with the file so as per the documentation here i have attached a client side event Upload to set metadata.

Here is my complete code

cshtml

      @(Html.Kendo().Upload().Name("files")
                 .Async(a=>a.Save("Save", "Home")
                 .AutoUpload(false)))

Upload JavaScript

$(function () {
    var _btnOK = $("#btnOK");
    var kendoUpload = $("#files").getKendoUpload();

    // trigger kendo's upload event
    _btnOK.click(function (e) {    
        e.preventDefault();    
        $(".k-upload-selected").click();    
    }); 

     // attach metadata here
     kendoUpload.bind("upload", function (e) {
             e.data = {
                    "Name": "John Doe",
                    "Age": 40,
                    "Address": {
                        "State": "TX",
                        "City": "Dallas"
                    }
                };
        })       

 })

The corresponding MVC controller and C# model

 public class Person
 {
    public string Name { get; set; }
    public int Age { get; set; }
    public Address Address { get; set; }

 }

   public class Address
   {       
     public string State { get; set; }
     public string City { get; set; }
   }

    [HttpPost]
    public async Task<ActionResult> UploadDocument(Person model)
    {
        //file get posted in HttpContext.Request.Files

        //model's immediate properties like Name and Age get posted however
        //model.Address is remains null
    }

When i click on OK, the selected file is posted to server inside HttpContext.Request.Files as expected.
Also model's immediate properties which has primitive datatype are posted, however model's child property of type complex object does not get post.

So in above example Name and Age has value but Address remains null.

Any idea?

Oggy Oggy · Accepted Answer · 2017-08-04T14:25:46

The problem is that the Kendo Upload widget eventually appends the fields to a FormData object, which can only handle strings or blobs as values (https://developer.mozilla.org/en-US/docs/Web/API/FormData/append).

What you could do is serialize your address object to a json string on the client side and then deserialize it into an Address object in your controller.

Client code:

// attach metadata here
     kendoUpload.bind("upload", function (e) {

             var address = {
                 "State": "TX",
                 "City": "Dallas"
             };

             e.data = {
                    "Name": "John Doe",
                    "Age": 40,
                    "Address": JSON.stringify(address)
                };
        })

Controller code:

[HttpPost]
    public async Task<ActionResult> UploadDocument(Person model)
    {
        JavaScriptSerializer js = new JavaScriptSerializer();
        model.Address = js.Deserialize<Address>(HttpContext.Request.Form["Address"]);

        // Do other stuff with your model

    }

Kendo upload does not post object with complex type property

1 Answers