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

Display Validation Messages in the Upload with Templates

Environment

Product Progress® Kendo UI® Upload for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I display a validation message in the Kendo UI Upload by using templates?

Solution

When the Upload is configured to use a template, the content of the template replaces some of the HTML elements of the widget that are rendered by default.

The following example demonstrates how to add a span element to the template. This allows a validation message to be conditionally displayed.

<div id="example">
    <input name="files" id="files" type="file" />
    <div class="demo-hint">You can only upload <strong>PDF</strong> files.</div>

    <script id="fileTemplate" type="text/x-kendo-template">
        <span class='k-progress'></span>
        <div class='file-wrapper'>
            <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
            <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
            <span class='validation-message #=files[0].extension == ".pdf" ? "hide" : "show"#'>#=files[0].extension# file type not allowed. </span>
            <button type='button' class='k-upload-action'></button>
        </div>
    </script>

    <script>
        $(document).ready(function () {
            $("#files").kendoUpload({
                async: {
                    saveUrl: "save",
                    removeUrl: "remove"
                },
                validation: {
                    allowedExtensions: [".pdf"]
                },
                template: kendo.template($('#fileTemplate').html())
            });
        });
    </script>
    <style>
        .hide {
            display: none;
        }

        .show {
            display: inline;
        }

        .validation-message {
            color: red;
        }
    </style>
</div>

See Also

In this article