Kendo UI Upload rename file on server and update client

Question

I am using Kendo UI Upload widget and I rename the uploaded file on the server. I return the new name of the file and I modify the file name in the success event but that doesn't fully update the file name. What I mean is that for example the links to remove the uploaded file that get sent to the server have the correct file name but the template that I use to display the details of the uploaded file have the original file name instead.

Widget configuration:

<input type="file"
       name="file"
       data-role="upload"
       data-template="fileTemplate"
       data-multiple="false"
       data-async="{ saveUrl: 'uploadFile', removeUrl: 'removeFile', autoUpload: true } "
       data-bind="events: { success: uploadSuccess } " />

Server response:

[text/plain]
{ "fileName": "89sd0adf0das9fdsa9.jpg" }

View model:

var viewModel = kendo.observable({
    uploadSuccess: function (e) {
        // Not sure this is the correct way to accomplish this
        e.files[0].name = e.response.fileName;
    }
});

Template:

<script id="uploadTemplate" type="text/x-kendo-template">
    <span class='k-progress'></span>
    <div class='file-wrapper'>
        File name: #= name # <br/>
        <button type='button' class='k-upload-action'></button>
    </div>
</script>

The .k-upload-action button (with link to remove the file) sends the correct file name to the server but the File name: #= name # block shows the wrong (original) file name.

Not sure if the way I modify the file name is the correct way. Does anyone know how to properly update the file name binding or if I am missing a step (somehow update the template used)?

Answer 1

You have to manually update the file name e.g.

uploadSuccess: function (e) {
    $(".filename").text(e.response.fileName);
}

Where .filename is an element from the template:

File name: <span class="filename">#= name #</span> <br/>

Here is a live demo: http://dojo.telerik.com/@korchev/EGuXi