Remove file from filelist

7 posts, 0 answers
  1. Tomas
    Tomas avatar
    41 posts
    Member since:
    Feb 2011

    Posted 04 Nov 2013 Link to this post

    How to remove file from Kendo Upload MVC  file-list which is hidden by default? Previously in Telerik Upload I have used the code below but it do not works anymore.

        this.removeFile = function (fileName) {       
            fileName = fileName.split("'")[0];
            $('span.k-filename[title="' + fileName + '"]').parent().remove();
        };
  2. Tomas
    Tomas avatar
    41 posts
    Member since:
    Feb 2011

    Posted 04 Nov 2013 Link to this post

    I would like to add that the code works fine on one file but if several files are selected the first one is deleted only.

    I would like to post the whole code. I use OnSelect to validate file and if validation failed I would like to remove the file.

    I use code which works fine when one file selected but if two or more files selected it do not work, only the first file is deleted.

    onSelect = function (e) {

    var files = e.files;

     e.data = helper.serializeForm();

    $.each(files, function () {
                var fileName = this.name;
                $.ajax({
                    url: urlSettings.validateFile,
                    data: JSON.stringify({ file: fileName, formData: e.data }),
                    contentType: 'application/json',
                    type: 'POST',
                    success: function (response) {
                        if (!response.result) {
                            helper.removeFile(fileName);
                        } 


                    }
                });

    };
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 Nov 2013 Link to this post

    Hi Tomas,


    Thank you for the additional details and for providing the source code. The reason for the issue is that in the select event, the files have not yet been added to the files list. You could add a setTimeout call in the select event and execute the custom logic in it, but keep in mind that this custom modification may cause further issues e.g. the "Upload" button won't hide automatically when the files list becomes empty and the autoUpload property is set to false.

    The support way to achieve this would be to prevent the select event by calling e.preventDefault(), but this method has a downside too - it prevents the selection of all current files.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Tomas
    Tomas avatar
    41 posts
    Member since:
    Feb 2011

    Posted 06 Nov 2013 Link to this post

    I have wrapped everything in SetTimeout but it do not work, I get the same behavior. Only the first file is deleted from file list.

     this.onSelect = function (e) {

            setTimeout(function() {
             //TheCode
    },1000);
    }
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 07 Nov 2013 Link to this post

    Hello Tomas,


    This is a custom unsupported scenario, but as we already started the discussion I prepared a small sample project, to demonstrate the approach that I described in my previous post. Feel free to modify it according to your needs.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Tomas
    Tomas avatar
    41 posts
    Member since:
    Feb 2011

    Posted 12 Nov 2013 Link to this post

    While investigating my code I have found the true reason why Remove file didn't worked in OnSelect event! If Batch(true) set in Kendo MVC Upload the code

    $('span.k-filename[title="' + fileName + '"]').parent().remove();

    will not work anymore. 
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 12 Nov 2013 Link to this post

    Hello Tomas,


    When the batch option of the async upload is enabled, the files are placed in a single list item and the title attribute is set to a string, consisting of the names of the files, concatenated with comma and a space. 
     
    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready