Upload Event order

5 posts, 1 answers
  1. Chuck
    Chuck avatar
    14 posts
    Member since:
    Apr 2015

    Posted 25 Oct 2017 Link to this post

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

     

  2. Neli
    Admin
    Neli avatar
    164 posts

    Posted 27 Oct 2017 Link to this post

    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.
  3. Chuck
    Chuck avatar
    14 posts
    Member since:
    Apr 2015

    Posted 30 Oct 2017 in reply to Neli Link to this post

    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.

  4. Answer
    Neli
    Admin
    Neli avatar
    164 posts

    Posted 31 Oct 2017 Link to this post

    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.
  5. Chuck
    Chuck avatar
    14 posts
    Member since:
    Apr 2015

    Posted 01 Nov 2017 in reply to Neli Link to this post

    Thank you, this solved the issue.
Back to Top