Remove file from filelist

[Tomas]

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();
    };

[Tomas]

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


                }
            });

};

[Dimiter Madjarov]

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

[Tomas]

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

[Dimiter Madjarov]

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

[Tomas]

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. 

[Dimiter Madjarov]

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