Templates
The Telerik UI Upload for ASP.NET MVC 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 MVC 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 MVC 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>