New to Kendo UI for jQueryStart a free 30-day trial

Upload in Synchronous Mode File Type Validation

Environment

ProductProgress® Kendo UI® Upload for jQuery
Operating SystemAll
BrowserAll
Preferred LanguageJavaScript

Description

How can I validate the file selected in the Upload by file type (extension), when synchronous mode is used?

Solution

When the Upload is configured to use synchronous mode the file type validation can be done with the Kendo UI Validator as demonstrated below.

    <form method="post" action="https://demos.telerik.com/kendo-ui/upload/submit">
        <div class="demo-section k-content">
            <input name="files" id="files" type="file" aria-label="files" />
            <p style="padding-top: 1em; text-align: right">
                <button type="submit" class="k-button k-primary">Submit</button>
            </p>
        </div>
    </form>
    <script>
        $(document).ready(function() {
            $("#files").kendoUpload({
				validation: {
					allowedExtensions: [".jpg"],
				}
            });
        });

		var validatable = $("form").kendoValidator({
			rules: {
				upload: function(input) {
					if (input[0].type == "file") {
						return (input.closest(".k-upload").find(".k-file").length > 0 && input.closest(".k-upload").find(".k-file-invalid").length == 0);
					}
					return true;
				}
			}
		}).data("kendoValidator");
    </script>
	<style>  
	.k-upload-button .k-invalid-msg {
		display: none !important;
	}
	</style>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support