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 string literal
<input type="file" name="files" id="upload" />
<script>
$("#upload").kendoUpload({
template: ({ name, size, files }) => `<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>