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

Remove file from filelist

6 Answers 232 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Tomas
Top achievements
Rank 1
Tomas asked on 04 Nov 2013, 01:42 PM
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();
    };

6 Answers, 1 is accepted

Sort by
0
Tomas
Top achievements
Rank 1
answered on 04 Nov 2013, 01:55 PM
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);
                    } 


                }
            });

};
0
Dimiter Madjarov
Telerik team
answered on 06 Nov 2013, 09:04 AM
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!
0
Tomas
Top achievements
Rank 1
answered on 06 Nov 2013, 10:02 AM
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);
}
0
Dimiter Madjarov
Telerik team
answered on 07 Nov 2013, 09:10 AM
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!
0
Tomas
Top achievements
Rank 1
answered on 12 Nov 2013, 10:24 AM
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. 
0
Dimiter Madjarov
Telerik team
answered on 12 Nov 2013, 12:46 PM
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!
Tags
Upload
Asked by
Tomas
Top achievements
Rank 1
Answers by
Tomas
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or