I use jQuery Form Plugin and APE comet server, and stuck with the same problem with uploading file using iframe.
Here is my solution (using static iframe instead of dynamic one):
Add the following code to page, that are loaded BEFORE starting APE:
<iframe id="file_upload_iframe" name="file_upload_iframe" src="iframe_src.html" style="position: absolute;left: -300px;top:-300px; width:0px;height:0px;"></iframe>
Add to the site the page iframe_src.html (the initial source for static iframe):
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.domain = document.domain; <!-- this is the main line -->
</script>
</body>
</html>
The purpose of this page is to allow the form plugin to make initial form submitting, avoiding permission error.
An application should return a response in the following way:
<html>
<head></head>
<body>
<script type="text/javascript">document.domain = document.domain;</script>
<textarea>' + YOUR_DATA_TO_RETURN + '</textarea>
</body>
</html>
That is to avoid permission denied error at the second and further form submissions.
Code for form submission on the client side:
$('#image_add_commit').click(function(){
$('#file_upload_iframe').unbind();//may be it is unnecessary
$('#image_add_form').ajaxSubmit(
{success: image_add_complete,
iframe: true,
iframeTarget: $('#file_upload_iframe').get(0),
dataType: 'html',
textarea: true});
});
function image_add_complete(data){
//data variable contains YOUR_DATA_TO_RETURN that was wrapped in HTML code
}
Modification in jquery.form.js file:
Find block
if (!s.iframeTarget) {
// add iframe to doc and submit the form
$io.appendTo('body');
if (io.attachEvent)
io.attachEvent('onload', cb);
else
io.addEventListener('load', cb, false);
}
and change it to
if (!s.iframeTarget) {
// add iframe to doc and submit the form
$io.appendTo('body');
}
if (io.attachEvent)
io.attachEvent('onload', cb);
else
io.addEventListener('load', cb, false);
(that is just moving the second curly brace up)
