reEnableEmpty() does not work when conventional submission is halted

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a form with a file upload and make the file upload a multifile
upload field
2. Add in form validation and bind the validation method to the form submit
3. Submit the form and make it fail validation (function returns false) and
notice that the file button is disabled

What is the expected output? What do you see instead?
I expect the file upload button to re-enable after the validation.

What version of the plugin/jQuery are you using?
PLUGIN VERSION: 1.45
JQUERY VERSION: 1.3.2

On what browser(s) or operating system?
BROWSER(S): Firefox on Windows

Please provide a link to where the problem can be observed:
URL: Not available. Private portal.

Feel free to provide any additional information below.
Here is a snippet of the html creating the file upload field, and the
document.ready and validation code. None of it is doing anything out of the
ordinary.

<form name="cmlCreateUpdateForm" id="cmlCreateUpdateForm" method="POST"
enctype="multipart/form-data" action="createModel.jsp">
<table>
<tr>
    <td colspan="1" align="right">Enter Supporting Documents to Upload<br>
    <input type="file" id="supportingDocs" name="supportingDocs" /></td>
    <td colspan="3">
      &nbsp;
    </td>
    </tr>
</table>
</form>

jQuery(document).ready(function() {
    jQuery("#cmlCreateUpdateForm").bind('submit', validateCmlForm);
    jQuery("#supportingDocs").MultiFile();
});

function validateCmlForm(){

    var errMsg = "";
if (jQuery("input[name='ExternalURL']",
"#cmlCreateUpdateForm").val().trim().length == 0) {
        errMsg += "Please enter the model home page\n";
    }
    if (jQuery("input[name='IssueTrackingURL']",
"#cmlCreateUpdateForm").val().trim().length == 0) {
        errMsg += "Please enter the model issue tracking URL\n";
    }

    if(errMsg.length > 0){

        alert(errMsg);
        /*
        jQuery.fn.MultiFile.reEnableEmpty();
        jQuery("#supportingDocs").removeAttr("disabled");
        */
        return false;

    }else{
        return true;
    }
}

As you can see, I tried using reEnableEmpty() and also manually re-enabling
the file field, but neither one works. Finally, I also tried using
autoIntercept to no avail:

jQuery("#supportingDocs").MultiFile({
        autoIntercept: ['validateCmlForm']
    });

I appreciate the help in figuring this out!

Original issue reported on code.google.com by n8cs...@gmail.com on 12 May 2009 at 3:04

[GoogleCodeExporter]

I think I spotted a bug in the reEnableEmpty and disableEmpty methods.

Please download the latest version from this link:
http://jquery-multifile-plugin.googlecode.com/svn/trunk/multiple-file-upload.zip

And you should now be able to use this method as you tried to:
$.fn.MultiFile.reEnableEmpty();

Original comment by diego.a...@gmail.com on 12 May 2009 at 4:02

• Changed state: Fixed
• Added labels: Priority-High
• Removed labels: Priority-Medium

[GoogleCodeExporter]

That fixed the problem if the file field is empty. However, if I choose a file 
or two
and then click the submit button and have the validation return false, the 
browse
button on the multifile field stays disabled.

Here is the change I made to my validation script to try to re-enable the field.

if(errMsg.length > 0){

        alert(errMsg);
        jQuery.fn.MultiFile.reEnableEmpty();
        /*
        jQuery("#modelFile").removeAttr("disabled");
        jQuery("#supportingDocs").removeAttr("disabled");
        */
        return false;

    }else{
        return true;
    }

I did also uncomment the line that manually un-disables the field, but it did 
not work.

Original comment by n8cs...@gmail.com on 12 May 2009 at 4:38

[GoogleCodeExporter]

The disableEmpty and reEnableEmpty methods apply only to elements created by 
the 
plugin. They do not affect the original element.

Since you're using conventional submission, not ajax, is there any reason why 
you 
can't reset the plugin? $('input:file').MultiFile('reset'); 

Alternatively, you could override these methods and re-enable the elements 
yourself 
with this code:
$('input:file').each(function(){ this.disabled = false });

Original comment by diego.a...@gmail.com on 12 May 2009 at 6:01

[GoogleCodeExporter]

PS.: When you don't make any selections, the disableEmpty and reEnableEmpty 
methods 
have nothing to do. Nothing is disabled and nothing needs to be re-enabled. But 
that 
doesn't mean it's working... But it doesn't even sound like you're using the 
latest 
version.

Can you check that you have this code on line 416 of the plugin:
reEnableEmpty: function(klass){ klass = 
(typeof(klass)=='string'?klass:'')||'mfD';

Original comment by diego.a...@gmail.com on 12 May 2009 at 6:05

[GoogleCodeExporter]

Yes, I see that line on 416.

reEnableEmpty: function(klass){ klass = 
(typeof(klass)=='string'?klass:'')||'mfD';

I will try re-setting the field. I thought that may be the way to go, but I 
don't
want to clear any files already selected by the user and I was not sure if it 
would
do that or not.

Would it make any difference if I specified the "multi" class on the input 
instead of
creating the multifile myself using a selector on document ready?

Original comment by n8cs...@gmail.com on 12 May 2009 at 6:28

[GoogleCodeExporter]

If I create the multifile field via the css class:

<input type="file" id="supportingDocs" name="supportingDocs" class="multi" />

and not via selector on document ready:

jQuery("#supportingDocs").MultiFile();

Then the browse button becomes enabled after validation if I do this after I 
return
false:

jQuery.fn.MultiFile.reEnableEmpty();

Using 'reset' does indeed wipe out any files the user has selected to upload, 
so I
cannot use it.

This works fine for our create form, but we are using MultiFile in conjunction 
with
the Form plugin on the update form, so I am not sure exactly what the 
implications
will be on that page. I will just have to try some different combinations to 
see if I
can get it to work.

We have had problems on that page with MultiFile only allowing the user to 
select one
file and then disabling the browse button.

Original comment by n8cs...@gmail.com on 12 May 2009 at 6:40

[GoogleCodeExporter]

Our update form is working as well now. The update form uses the form plugin to 
do an
ajax submit. It also uses the same validation function, which is returning
true/false. If false, it also calls jQuery.fn.MultiFile.reEnableEmpty();

Here is how we set things up on the page.

jQuery(document).ready(function() {
    var options = {
        target: '#main',
        iframe: true,
        beforeSubmit: validateCmlForm,
        success: handleResponse
    };

    // bind form using 'ajaxForm'
    jQuery('#supportingDocs').MultiFile();
    jQuery('#cmlCreateUpdateForm').ajaxForm(options);
    jQuery('#cancelBtn').bind('click',cancelUpdate);
});

I appreciate all of your help in figuring this out and fixing the bugs. 
Everything
appears to be working now as expected!

Original comment by n8cs...@gmail.com on 13 May 2009 at 12:25

[GoogleCodeExporter]

Great! I'm glad you've got it working...

I'll do some more testing with conventional submission to see if I can find a 
bug 
somewhere. But for now I'll consider this one fixed! Yay!

Original comment by diego.a...@gmail.com on 13 May 2009 at 12:49

• Changed title: reEnableEmpty() does not work when conventional submission is halted