How to prevent form submission before progress bar display

Question

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

Answer 1

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

Answer 2

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.