Update file names after kendo upload success

[Lali]

I saved file in server with unique name. so i change the file name while uploading. My issue is, when I upload file, I need to update the k-files to show only changed name. but now, it is displaying original file name.

$("#MediaFiles").kendoUpload({ async: { removeUrl: "/Pepsico/Remove", saveUrl: "/Pepsico/Save", autoUpload: true }, files: $scope.pepsicoNomination.MediaFiles, validation: { allowedExtensions: [".pdf"] }, upload: fileUplaodValidation, success: onMediaSucess, error: onError }); function onMediaSucess(e) { if (e.response.media == "") { $scope.$apply(function () { $rootScope.showFailureMsg("There is an issue while uploading your file. Please contact customer support"); }); var fileStatus = document.getElementsByClassName('k-upload-status-total') $(fileStatus).hide(); } else { $scope.pepsicoNomination.MediaFiles.push({ name: e.response.media }); } }

 

Here files in kendo upload not update after success.

Is there any way to update files?

 

Thanks

[Ivan Danchev]

Hello Lali,

The filename in the Upload's file list can be changed in the success event handler. You can access the uploaded file's uid through the event data (e.files). Each uploaded file is rendered within a li element with class k-file. That li element has the file's uid value set as a data-uid attribute. So the uid can be used to get the li element that corresponds to a specific file and change the filename:

function onSuccess(e) {
    var file0Uid = e.files[0].uid;
    $(".k-file[data-uid='" + file0Uid + "']").find(".k-file-name").text("New Filename");
}

Regards,
Ivan Danchev
Telerik by Progress

[Esha]

Can this be done in angular way rather than using jquery?

[Esha]

Never mind, on event of Upload, i simply changed the file.name to one which i desired, and it worked.!

 

[Zaw]

Can I get sample code of this in Angular Kendo Upload?

[Neli]

Hello Zaw,

Could you please confirm if you are using AngularJS or Angular 2+.

In case you are using AngularJS you could use the approach described previously 

$scope.onSuccess = function(e) {              	
                 var file0Uid = e.files[0].uid;
    		$(".k-file[data-uid='" + file0Uid + "']").find(".k-file-name").text("New Filename");
 }

If you are using Angular 2+ please note that Kendo UI for Angular is a separate suite of native Angular 2 UI components as described here.  You could find more demos for Kendo Angular Upload on the link here. Also, the Kendo Angular Forum could be helpful. 

Regards,
Neli
Progress Telerik

[Zaw]

I'm using Angular 2+, can I get sample code for this ?

[Ivan Danchev]

For questions related to Kendo UI for Angular, please submit a thread in the Kendo UI for Angular Forums: https://www.telerik.com/forums/kendo-angular-ui