Custom Upload Template

1 Answer 21 Views
Upload
Rajesh
Top achievements
Rank 1
Rajesh asked on 25 Mar 2024, 07:49 PM

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>

1 Answer, 1 is accepted

Sort by
0
Mihaela
Telerik team
answered on 28 Mar 2024, 10:28 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Rajesh
Top achievements
Rank 1
commented on 28 Mar 2024, 01:08 PM

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
Telerik team
commented on 02 Apr 2024, 06:46 AM

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

Tags
Upload
Asked by
Rajesh
Top achievements
Rank 1
Answers by
Mihaela
Telerik team
Share this question
or