This is a migrated thread and some comments may be shown as answers.

Update file names after kendo upload success

5 Answers 2420 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Lali
Top achievements
Rank 1
Lali asked on 03 May 2017, 09:04 AM

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

5 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 05 May 2017, 07:18 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Esha
Top achievements
Rank 1
answered on 09 May 2019, 01:02 PM
Can this be done in angular way rather than using jquery?
0
Esha
Top achievements
Rank 1
answered on 10 May 2019, 01:42 PM

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

 

0
Zaw
Top achievements
Rank 1
Veteran
answered on 18 Mar 2021, 09:56 AM
Can I get sample code of this in Angular Kendo Upload?
0
Neli
Telerik team
answered on 22 Mar 2021, 08:47 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Zaw
Top achievements
Rank 1
Veteran
commented on 08 May 2021, 04:42 PM

I'm using Angular 2+, can I get sample code for this ?
Ivan Danchev
Telerik team
commented on 12 May 2021, 06:04 AM

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

 

Tags
Upload
Asked by
Lali
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Esha
Top achievements
Rank 1
Zaw
Top achievements
Rank 1
Veteran
Neli
Telerik team
Share this question
or