passing objects with upload

4 posts, 0 answers
  1. Drew Auman
    Drew Auman avatar
    17 posts
    Member since:
    Sep 2009

    Posted 17 Jul 2013 Link to this post

    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?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 19 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. David Yardy
    David Yardy avatar
    16 posts
    Member since:
    Aug 2007

    Posted 18 Dec 2014 in reply to Dimiter Madjarov Link to this post

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





  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 19 Dec 2014 Link to this post

    Hello David,


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

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready