New to Telerik UI for ASP.NET Core? Download free 30-day trial

Templates

The Telerik UI Upload for ASP.NET Core allows you to implement templates to customize the rendering of the files in the file list of the Upload component.

To configure the Telerik UI Upload for ASP.NET Core to use a template use the Template() or TemplateId() configuration option.

When the Upload is configured to use a template, the content of the template replaces some of the HTML elements of the Telerik UI Upload for ASP.NET Core that are rendered by default. The following example demonstrates how you can use a custom template and display a validation message conditionally:

<h4>Upload PDF</h4>
@(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a
        .Save("Validation_Save", "Upload")
        .Remove("Validation_Remove", "Upload")
        .SaveField("files")
    )
    .Validation(validation => validation.AllowedExtensions(new string[] { ".pdf" }))
    .TemplateId("fileTemplate")
)

<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>

<style>
    .hide {
        display: none;
    }
    .show {
        display: inline;
    }
    .validation-message {
        color: red;
    }
</style>

See Also

In this article
Not finding the help you need? Improve this article