malsup/form — Issue #162: Form submission requests does not necessarily submit forms with files as they are when the request is done unless forceSync is enabled (e.g. reset, affects Opera)
Author: Chealer
Created: 2012-01-27 19:23:49+00:00
State: open

Our file upload form used code like this:

$('#progress_'+n).html("{tr}Uploading file...{/tr}");
$('#file_'+n).submit();
document.getElementById('file_'+n).reset();

This worked with standard JavaScript, but was not working in certain browsers when I switched to jQuery Form Plugin, until I enabled forceSync. Browsers affected include Opera and perhaps MSIE. The form in question uses ajaxForm(), but this would also happen with ajaxSubmit().

The problem with the above code is that reset modifies the form, and although the request to reset the form happens after the submission request, the actual submission is delayed until after the form modification was done. As forceSync's documentation shows, this is intentional:

forceSync
Boolean value. Set to true to remove short delay before posting form when uploading files (or using the iframe option). The delay is used to allow the browser to render DOM updates prior to performing a native form submit. This improves usability when displaying notifications to the user, such as "Please Wait..."
Default value: false

I am not a JavaScript expert and don't really understand what is the problem with DOM updates, but this sounds like a browser issue. Here (Opera 11.60), my "Uploading file..." message shows fine anyway.
I can see a few options:
1. Remove forceSync or make it default to true.
2. Save the form's status when ajaxSubmit() is called.
3. Document the problem in ajaxForm() and ajaxSubmit()'s documentation.

I'm guessing 2. may not be as easy as it sounds (it's probably not possible to save a reference to the file and would therefore involve saving the file's contents, which could be costly).

This issue was reported in https://github.com/malsup/form/issues/67