New to Kendo UI for jQuery? Start a free 30-day trial

Template

configuration

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.

template

String|Function

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