jQuery Multiple File Upload Plugin - disabled field after submit

[GoogleCodeExporter]

jQuery Multiple File Upload Plugin v1.47

Works fine, but: I have a form with javascript onsubmit validator. When I 
attach some images with the Multiple plugin and then I submit the form with 
some error /for example leaving some empty fields/, then after onsubmit 
validation I have an alert with the error - thats ok, BUT the upload button for 
the plugin stays disabled and I can't add more files either I didn't reach the 
maximum count. Only if aj remove some image, only then I am able again to 
upload another images.

Original issue reported on code.google.com by jswe...@gmail.com on 12 Jul 2012 at 9:08

[GoogleCodeExporter]

I have exactly the same issue. Validation errors prevent the form from being 
submitted (I do not show any alerts, just error messages). However, "Browse..." 
button gets disabled. I am able to re-enable the button using the following 
jQuery selector: $("input[type='file'].multi").removeAttr("disabled")

I am not sure what is causing this behavior, though.

Original comment by milhad...@gmail.com on 20 Mar 2014 at 8:21

[GoogleCodeExporter]

The plug in automatically disabled *its own* elements that have an empty value. 
This is a required behaviour so that the submitted file array doesn't contain 
an final empty item. 

Can either of you provide a link or code sample? 

Original comment by diego.a...@gmail.com on 20 Mar 2014 at 8:26

[GoogleCodeExporter]

Yes, but the form does not get submitted because of the validation errors.

Attached is sample page so you can see the html page.

Steps to reproduce:
1. Browse one file and select it
2. Click on Create button, to try and submit the form
3. Client side validation will kick in, preventing the form from being submitted
4. "Browse..." button gets disabled!

Original comment by milhad...@gmail.com on 20 Mar 2014 at 8:54

Attachments:

• Sample.html

[GoogleCodeExporter]

1st thing I noticed: you have the plugin loaded twice... You have 
jquery.MultiFile.pack.js and jquery.MultiFile.js but they are the same and you 
should only use one.

What it the "error" you see?
Looks like you have same server-side validation going on.

Original comment by diego.a...@gmail.com on 20 Mar 2014 at 9:07

• Changed state: Unidentified

[GoogleCodeExporter]

I've re-created your form here and it seems to work perfectly:
http://jsfiddle.net/XJh2V/

Original comment by diego.a...@gmail.com on 20 Mar 2014 at 9:11

[GoogleCodeExporter]

I stopped the form submitting so you could see the results...
http://jsfiddle.net/XJh2V/1/

And here's an explanation:
http://i.imgur.com/RaEpg1z.jpg

Original comment by diego.a...@gmail.com on 20 Mar 2014 at 9:15

[GoogleCodeExporter]

1) No server side code gets executed, because the form is not being submitted 
due to the client side validation.

2) There is no "error", just the "Browse..." button gets disabled. This is 
happening because the plugin thinks that the form ***will be submitted***. 
However, because of the client side validation (like required field not being 
populated), form is not submitted to server, and you are left with "Browse..." 
button disabled.

Let me know if you need any more info.

Original comment by milhad...@gmail.com on 20 Mar 2014 at 9:16

[GoogleCodeExporter]

I think I understand the issue now!

In which case, have a look at the "Uploading tab" (3rd heading):
http://www.fyneworks.com/jquery/multiple-file-upload/

The plugin attaches itself to the form submission event so that it can disable 
the dummy file input (again, this is required behaviour for most server-side 
interrogations).

If you don't actually submit the form and need it to be enabled, you can call 
this method:
$.fn.MultiFile.reEnableEmpty();

...which is a method the plugin has to asist those submitted the data via ajax 
or an iframe.

Let me know if that helps.

Original comment by diego.a...@gmail.com on 20 Mar 2014 at 9:21

• Changed state: Started

[GoogleCodeExporter]

I saw that method, and it re-enables the upload control if the form fails to 
get submitted.

I am not sure if there is a way to detect a "failure" during form submission 
and re-enable the button automatically, since this behavior can be a little 
confusing.

Thanks,
Milhad

Original comment by milhad...@gmail.com on 20 Mar 2014 at 9:27

[GoogleCodeExporter]

Something isn't right because the method only fires when the submit event is 
triggered.

But here's a workaround, you can override this behaviour with the 
"autoIntercept" option. See code here:
http://jsfiddle.net/XJh2V/7/

Original comment by diego.a...@gmail.com on 20 Mar 2014 at 10:14