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

Upload Event order

4 Answers 190 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Chuck
Top achievements
Rank 1
Chuck asked on 25 Oct 2017, 03:26 PM

I am using Kendo MVC Upload control.  I am using it non-async mode with Multiple files marked false.

I want to use the events to control enabling/disabling the form Submit button.  This works except in one case.  If you select a file that fails validation, then select a new file that succeeds validation.  My Submit button is still marked disabled.

This seems to be because the onSelect event fires 1st and then the onRemove event fires 2nd.
I would like to suggest it would be better for the OnRemove event fire 1st and the onSelect event to fire 2nd.

$(document).ready(function () {
    $("#SubmitButton").attr("disabled", true);
});

function onSelect(e) {
    if (e.files[0].validationErrors == undefined) {
        $("#SubmitButton").attr("disabled", false);
    } else {
        $("#SubmitButton").attr("disabled", true);
    };
}

function onRemove(e) {
    $("#SubmitButton").attr("disabled", true);
}

 

4 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 27 Oct 2017, 02:45 PM
Hello Chuck,

Please take a look of the enclosed Dojo example, where the submit button is enabled/disabled correctly.

Could you please try to modify it or send us a runable project, in order to reproduce the issue, so we could inspect it locally and assist you further.

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chuck
Top achievements
Rank 1
answered on 30 Oct 2017, 10:05 PM

Hello,

Your DoJo example is what is happening with my code.  However you do not have the onRemove event.  So if a user selected a valid file and then removed it, the Submit button would still be active.

0
Accepted
Neli
Telerik team
answered on 31 Oct 2017, 03:46 PM
Hi Chuck,

In order to disable the Submit button if a valid file is removed, in the remove event handler, you could check the count of the files by using getFiles method. 

To make sure that the received count is the same as the final result will be, you should use the setTimeout function. Thus, you could get the files count at the end of the method execution, when the first selected file will be removed. 
setTimeout(function(){
   
    var files = e.sender.getFiles();             
   
    if(files.length < 1){
        $("#SubmitButton").attr("disabled", "disabled");
    }
     
}, 0)

You could find the modified Dojo example here.


Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chuck
Top achievements
Rank 1
answered on 01 Nov 2017, 02:19 PM
Thank you, this solved the issue.
Tags
Upload
Asked by
Chuck
Top achievements
Rank 1
Answers by
Neli
Telerik team
Chuck
Top achievements
Rank 1
Share this question
or