Validate Selection of Files for Upload

Environment

Product	Progress® Kendo UI® Upload for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I validate if a file is selected for upload when working with the Upload?

Solution

Use a custom rule in the Kendo UI Validator to validate on form submission whether a file in the Upload was selected.

    <form id="myForm" action="https://demos.telerik.com/kendo-ui/upload/submit" enctype="multipart/form-data" method="post">
        <input id="files" name="files" type="file"/>
        <input type="submit" />    
    </form>

    <script>
        $("#files").kendoUpload();

        var fileNotSelected = false;

        var validator = $("#myForm").kendoValidator({
            rules: {
            upload: function(input) {
                if (input[0].type == "file") {
                    fileNotSelected = true;
                    var len = input.closest(".k-upload").find(".k-file").length;

                    return len > 0;
                }

                return true;
              }
            }
        }).data("kendoValidator");

        $("#myForm").submit(function(e) {
            $("#files").removeAttr("disabled");

            if(!validator.validate()) {
                if(fileNotSelected) {
                    alert('Please select file to upload')
                    fileNotSelected = false;                    
                }
                e.preventDefault()
            }
        });  
    </script>