New to Kendo UI for jQuery? Download free 30-day trial

Validate Files and File Extensions on Upload


Product Progress® Kendo UI® Upload for jQuery


How can I validate the Kendo UI Upload widget on form submit by using the Kendo UI Validator? How can I validate whether a file with the allowed extensions is selected?


To validate whether a file is selected and that the selected file has the correct extension, create a custom rule for the Kendo UI Validator.

    <form method="POST" name="procedureForm" id="myForm">
        <p> allowed files extensinos: 'CSV', 'XML', 'XLS', 'XLSX'</p>
        <span class="k-invalid-msg" data-for="files"></span>
        <input id='files' name='files' type='file' validationmessage='Please upload a valid file' />
        <input type="submit" id="btnSubmit" class="k-button" value="Submit" />
    <script type="text/javascript">
        $(document).ready(function() {
            //create validator with custom rule
            var validator = $("#myForm").kendoValidator({
                rules: {
                    upload: function(input) {
                        if ($("#files").closest('.k-upload').find('.k-file').length > 0 &&
                            input.closest(".k-upload").find(".k-file-invalid").length == 0) {
                            return true;

            //create Upload widget

                localization: {
                    select: "Browse"
                validation: {
                    allowedExtensions: ['CSV', 'XML', 'XLS', 'XLSX'],
                    maxFileSize: 2048000
In this article