Kendo Upload upgrade(MVC) - OnUploadSelect code change

With the older version of telerik, we had a snippet of code to find the number of childnodes as given below

function onUploadSelect(ev) {
var numberOfFiles;
if (ev.target.childNodes[1] != undefined && ev.target.childNodes[1] != null) {
    numberOfFiles = ev.target.childNodes[1].childNodes.length;
}
if ((numberOfFiles + ev.files.length) > 4) { 
//some custom validation error msgs being thrown
}
}

the basic logic of this code is to prevent uploading more than 4 files, Ex - i select 2 files,dont click on upload instead select a file again and then click on upload, I'm good(2+1<4) With the KEndo Uplaod, ev.target is undefined, can you suggest a possible alternative for this?

Thanks Adarsh

Solution

Please try with the below code snippet.

Kendo-HTML

<!DOCTYPE html>
<html>
<head> 
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section">
                    <input name="files" id="files" type="file" />
</div>
<script>
                $(document).ready(function() {
                    $("#files").kendoUpload({
                       select: onSelect
                    });
                });

        function onSelect(e) {
                    if (e.files.length > 4) {
               alert("Please select max 4 files.");
               e.preventDefault();
            }
                else {
               var existingfileCount = $(".demo-section li").length;
               if((e.files.length + existingfileCount) > 4)  
               {
                   alert("You can not upload more than 4 files");
                   e.preventDefault();
                   }

                }
                }
</script>
</body>
</html>

Kendo-MVC

Javascript

<script>
             function onSelect(e) {
                    if (e.files.length > 4) {
               alert("Please select max 4 files.");
               e.preventDefault();
            }
                else {
               var existingfileCount = $(".demo-section li").length;
               if((e.files.length + existingfileCount) > 4)  
               {
                   alert("You can not upload more than 4 files");
                   e.preventDefault();
                   }

                }
                }
</script>

View.cshtml

<div class="demo-section">
        @(Html.Kendo().Upload()
            .Name("files")
            .Events(events => events.Select("onSelect"))
        )
</div>

Note : I have used 'demo-section' class to simplyfy the code. If you want to rename this class then rename this class in html/cshtml and javascript.

Let me know if any concern.