How to prevent form submission before progress bar display

I am using Uploadify for a real time application and so far its working fine except this one issue. I have 6 Browse buttons for uploading 6 files (with multi - 'true' for each) and I have a submit button as well on my page (JSP).

If the user selects a file on any of these Browse buttons, there is a slight delay before the progress bar is displayed after the file is selected. In the meanwhile if the user clicks the Submit button, the form gets submitted even before the progress bar is displayed and NO file gets uploaded. I have looked at the available methods but not able to fin开发者_如何学编程d a solution still.

I highly appreciate and look forward to any help in this matter.

Thanks.

Please find my code below:

    $("#vehShortTestAttachment1").uploadify({
        'uploader'  : '../pts/swf/uploadify.swf',
        'script'    : url,
        'cancelImg' : '../pts/images/cancel.png',
        'wmode'     : 'transparent',
        'hideButton': 'true',
        'width'     : 67,
        'height'    : 20,
        'multi'     : true,
        'sizeLimit' : 20971520,
        'fileDesc'  : 'jpg, gif, doc, ppt, jpeg, txt, pdf',
        'fileExt'   : '*.jpg;*.gif;*.doc;*.ppt;*.jpeg;*.txt;*.pdf',
        'onCancel': function () {
            $('#attachments-div-validation').html("");
            isFileBig = false;  
        },
        'onSelectOnce': function (event, queueID, fileObj) {        
            $("#attachments-submit-case-button").attr("disabled", true); 
        },
        'onSelect': function (event, queueID, fileObj) {        

                $("#attachments-div-validation").html(div_validation_red_start + "<B>You can select other files (or) Submit the Case now.</B>" + div_validation_red_end);
            $("#attachments-div-validation").show();

            if (fileObj.size > 20971520) 
            {               
                $('#attachments-div-validation').html(div_validation_red_start + "Size of the file: " + fileObj.name + " exceeds 20MB and this file can not be uploaded. <br>Please click on the X button on the progress bar for this file to cancel the upload. <br>Please click on BROWSE button again to upload another file." + div_validation_red_end);
                $('#attachments-div-validation').show();    
                isFileBig = true;                                       
            }
        },
        'onComplete': function(event, queueID, fileObj, response, data)
        {                               
            if(response == 'OK') {
                $('input[name=fileUploadStatus]').val(response);
                $("#vehShortTestAttachment1").uploadifySettings('script', url);
            }
            else {
                $('input[name=fileUploadStatus]').val(response);
                $('#vehShortTestAttachment1').uploadifyCancel(queueID);
                $('#vehShortTestAttachment1').uploadifyClearQueue();                    
            }
        },
        'onAllComplete':function(event, data) 
        {                       
            $("#attachments-submit-case-button").attr("disabled", false); 

            if(!isFileBig)
                submitFormDetails();
        }
    });

You could check, if there are upload-items present when the user tries to subbmit the form

$("form").submit(function(evt) {
    if ($(".uploadifyQueueItem").children().length > 0) {
        evt.preventDefault();
        alert("There are still files to upload...");
    }
    //...
});

Edit: Just checked the documentation

Why not disable the Submit-Button, when a file gets selected and enable it on onAllComplete.

$("#fileInput").uploadify({
    //...
    onSelectOnce: function() {
        $("#btn_submit").attr("disabled", true);
    },
    onAllComplete: function() {
        $("#btn_submit").attr("disabled", false);
    }
});

Just an extract, but this is approximately what I'm using...

    onInit           : function ( ) {
        $('#uploadbtn').attr('disabled', true);
    },
    onSelect         : function (a, b, c, d, e) {
        $('#uploadbtn').attr('disabled', false);
    },

I'm not sure why you have 6 browse buttons.. but I don't think it matters in this case.

The onselect event:

'onSelect': function (e, fileID, fileObj) {
      $(".editor-form-submit").show();
}

sadly only fires AFTER the swf is done checking the file size etc. This is why there's a short time between the selection of the file and the actual select event, in wich the user can submit the form.

If anyone knows of anyway to get an event "before the uploadify swf" opens the dialog, that would be greatly appreciated.