Custom Upload Template

[Rajesh]

How to display the "File(s) saved successfully in the Custom Kendo Upload Template.

 

Using the template below:

<span class='k-progress'></span>
<div class='file-wrapper'>
    <span class='file-icon #=addExtensionClass(files[0].extension)#'></span>
    <div class='file-heading file-name-heading'>Name: #=name#</div>
    <div class='file-heading file-size-heading'>Size: #=kendo.toString(size/1024,"n2")# KB</div>
    <div class="file-heading file-error-heading">
    #if (files[0].error) { # <span class="k-file-validation-message"> #= files[0].error # </span> # } #
    </div>
</div>

[Mihaela]

Hello Rajesh,

As per my understanding, your requirement is to display the "File(s) saved successfully" message within the Upload template, when the upload operation is successful.

If this is the case, you can hide the message initially and show it when the files are uploaded successfully:

• Add the message in a hidden <div> element in the template:

<style>
  .success-message {
    display: none;
  }
</style>

<script id="fileTemplate" type="text/x-kendo-template">
    <span class='k-progress'></span>
    <div class='file-wrapper'>
        <span class='file-icon #=addExtensionClass(files[0].extension)#'></span>
        <div class='file-heading file-name-heading'>Name: #=name#</div>
        <div class='file-heading file-size-heading'>Size: #=kendo.toString(size/1024,"n2")# KB</div>
        <div class="file-heading file-error-heading">
        #if (files[0].error) { # <span class="k-file-validation-message"> #= files[0].error # </span> #}#
        </div>
        <div class="file-heading success-message">File(s) saved successfully</div>
    </div>
</script>

• Handle the Success and Upload events of the Upload component and show/hide the message with jQuery:

    @(Html.Kendo().Upload()
            .Name("files")
            .TemplateId("fileTemplate")
            .Events(ev => ev.Success("onSuccess").Upload("onUpload"))
            ...
    )

<script>
    function onSuccess(e) {
        if(e.operation == "upload") {
            $(".success-message").show(); // Show the message.
        }
    }

    function onUpload() {
        $(".success-message").hide(); // Hide the message during upload
    }
</script>

Let me know if this is the result you aim to achieve.

 

Regards,
Mihaela
Progress Telerik

[Rajesh]

Hi Mihaela,

Though this solution does work. It keeps hiding and showing the File(s) saved... message for files that are already uploaded too, in case user is trying to add multiple files but one at a time. which makes it confusing. I was looking for the <div that is used by the default kendo template that shows this message correctly (but the default internal template does not show the size of the file(s)).

I had found a custom upload template sample earlier that had the solution that worked, it just had a div similar to the one for showing error but showed File(s) saved successfully for each file as they finished uploading successfully. However, I am unable to locate that sample by googling now.

<div class="file-heading file-error-heading">
        #if (files[0].error) { # <span class="k-file-validation-message"> #= files[0].error # </span> #}#
        </div>

[Mihaela]

Hi Rajesh,

Thank you for the additional information and details.

In this case, the easiest approach would be to use the default file template and show the hidden size of the uploaded file with CSS:

<style>
.k-upload-files .k-file-size {
    display: block!important;
}
</style>

Let me know if this approach works for you.

Best,

Mihaela