Update file names after kendo upload success

4 posts, 0 answers
  1. Lali
    Lali avatar
    2 posts
    Member since:
    May 2017

    Posted 03 May 2017 Link to this post

    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?



  2. Ivan Danchev
    Ivan Danchev avatar
    2053 posts

    Posted 05 May 2017 Link to this post

    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");

    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.
  3. Esha
    Esha avatar
    2 posts
    Member since:
    Mar 2016

    Posted 09 May 2019 in reply to Ivan Danchev Link to this post

    Can this be done in angular way rather than using jquery?
  4. Esha
    Esha avatar
    2 posts
    Member since:
    Mar 2016

    Posted 10 May 2019 in reply to Esha Link to this post

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


Back to Top