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>