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>