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>
@{
string[] extensions = { ".pdf" };
}
<h4>Upload PDF</h4>
<kendo-upload name="files" template-id="fileTemplate">
<async save-url="@Url.Action("Validation_Save","Upload")"
remove-url="@Url.Action("Validation_Remove","Upload")"
save-field="files" />
<validation allowed-extensions="@extensions" />
</kendo-upload>
<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>