How to include selector value in Kendo UI Upload template

[Chuck]

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?

[Dimiter Madjarov]

Hello Chuck,


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

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

 

 

[Josh]

What is the link to the support thread?  

[Dimiter Madjarov]

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