CODEWITHSUNDEEP
jqueryuploadify
Radhika
Radhika

Reputation: 81

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

Upvotes: 1

Views: 2342

Answers (3)

Michiel Cornille
Michiel Cornille

Reputation: 2097

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.

Upvotes: 0

aland
aland

Reputation: 2004

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.

Upvotes: 0

Andreas
Andreas

Reputation: 21881

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

Upvotes: 2

Related Questions