template String|Function
Sets a template for rendering the files in the file list.
The template
data Array
consists of:
- name - The name of the file. If in batch upload mode, represents a string combination of all file names separated with comma.
- size - The file size in bytes. If in batch upload mode, represents the total file size. If not available, the value is
null
. - files - An array which contains information about all selected files (name, size, and extension).
- To render an action button for each file, add the following markup to the template:
<button type='button' class='k-upload-action'></button><button type='button' class='k-upload-action'></button>
.- To use the default progress-bar, add the following markup at the beginning of the template:
<span class='k-progress'></span>
. Then, render the rest of the template that relates to it. For a live demo, refer to the example on the Upload templates.
Example - specifying the template as a function
<input type="file" name="files" id="upload" />
<script id="fileTemplate" type="text/x-kendo-template">
<div>
<p>Name: #=name#</p>
<p>Size: #=size# bytes</p>
<p>Extension: #=files[0].extension#</p>
<strong class='k-upload-status'>
<button type='button' class='k-upload-action'></button>
<button type='button' class='k-upload-action'></button>
</strong>
</div>
</script>
<script>
$("#upload").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
Example - specifying the template as a string
<input type="file" name="files" id="upload" />
<script>
$("#upload").kendoUpload({
template: "<div><p>Name: #=name#</p>" +
"<p>Size: #=size# bytes</p><p>Extension: #=files[0].extension#</p>" +
"<strong class='k-upload-status'>" +
"<button type='button' class='k-upload-action'></button>" +
"<button type='button' class='k-upload-action'></button>" +
"</strong>" +
"</div>"
});
</script>