How to include selector value in Kendo UI Upload template

4 posts, 0 answers
  1. Chuck
    Chuck avatar
    1 posts
    Member since:
    Mar 2014

    Posted 13 Aug 2014 Link to this post

    I have a kendo upload component with a custom template that will include a dropdown list for each file selected. The user will select a list of files to upload and then use the dropdown lists to select the upload type for each item in the upload list.


    <script id="fileTemplate" type="text/x-kendo-template">
        <span class='k-progress'></span>
        <div class='file-wrapper'>
            <span class='file-icon #=addExtensionClass(files[0].extension)#'></span>
            <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
            <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
            <label></label>
            <select id="uploadType" class="uploadType" name="uploadType">
                <option>Unknown</option>
                <option>Type A</option>
                <option>Type B</option>
                <option>Type C</option>
                <option>Type D</option>
            </select>
            <button type='button' class='k-upload-action'></button>
        </div>
    </script>
     
    $(document).ready(function () {
        $("#files").kendoUpload({
            multiple: true,
            async: {
                saveUrl: '@Url.Action("Save", "DataUpload")',
                autoUpload: false
            },
            template: kendo.template($("#fileTemplate").html()),
            error: onError
        });
    });
     
    function onError(e)
    {
        ???How do I get error information to use here???
    }



    [HttpPost]
    public ActionResult Save(IEnumerable<HttpPostedFileBase> files, ???)
    {
        //I need to know what type was selected before I can decide what
        //processing should be done for the file. So, I assume I need another
        //Param that contains he type selected by the user.
     
        return Content("");
    }


    I have 2 questions:

    1. How do I get access to the dropdown values set for each item from inside my controller action?

    2. if the upload fails how do I get error information to use in the onError method?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 14 Aug 2014 Link to this post

    Hello Chuck,


    I covered this question in the support thread on the same topic.

    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. Josh
    Josh avatar
    4 posts
    Member since:
    Jul 2014

    Posted 15 Aug 2014 in reply to Dimiter Madjarov Link to this post

    What is the link to the support thread?  
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 18 Aug 2014 Link to this post

    Hi Josh,


    I cannot post a direct link to the support thread, but for convenience, here is my answer:


    You could use the following approach to send the additional data to the save handler. It uses the upload event handler to attach it to the form data. In order to access each DropDownList you could use the unique uid attribute, that is assigned to the files in the list in order to access specific item from the files list.
    E.g.
    function onUpload(e) {
        var upload = this;
        var file = e.files[0];
        var uid = file.uid;
        var listItem = upload.wrapper.find("[data-uid='" + uid + "']");
        var dropdown = listItem.find("[data-role='dropdownlist']").data("kendoDropDownList");
        var value = dropdown.value();
      
        e.data = {
            dropDownValue: value
        };
    }

    Regarding the second question, a sample approach would be to return a non empty content result from the save handler.
    E.g.
    return Content("Validations have failed");
    Which then could be accessed in the error event handler.
    function onError(e) {
        var errorMessage = e.XMLHttpRequest.responseText;
        alert(errorMessage);
    }


    I hope this information helps.

    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