Need file input cloned from 1 form into another via Javascript

Ok, I have an <input type="file" name="image" /> in an html form that get's submitted via method="POST". But I can't submit this normally, since this is all I want submitted, and there is already a <form> tag defined above the code and than below the code, closes the form with </form> that must remain there. Since, there is no way to have forms inside of forms, I am using Javascript to create a form and submit it on the fly. But I need to get a copy of the file input element defined in the document.forms.creator form.

Ok, so quick recap: I handle the action with a php file that calls $_FILES['image']['name'] and $_FILES['image']['tmp_name']. The problem is I need to create the form on the fly, must clone the <input type="file" name="image" /> so that it obtains the $_FILES['image']['name'] and $_FILES['image']['tmp_name'] and submits it all on the FLY!

Here's what I got so far, coded in php, but you can see the Javascript in there as well. It submits it fine, but $_FILES['sigImg']['name'] and $_FILES['sigImg']['tmp_name'] are NOT SET for some reason...


echo '<tr><td colspan="2"><a href="#" name="sig' . $user_info['id'] . '"></a><center><b>Signature Image Rotator</b></center><br /><center>
Add Image: <input type="file" size="48" id="imagefile" name="image" />&nbsp;&nbsp;<input type="button" value="Upload" onclick="createFormAndSubmit()"></center>';


echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
//helper function to create the form
function getNewSubmitForm(){
var submitForm = document.createElement("FORM");
document.body.appendChild(submitForm);
submitForm.enctype = "multipart/form-data";
submitForm.method = "POST";
return submitForm;
}

//function that creates the form, adds some elements
//and then submits it
function createFormAndSubmit(){
var submitForm = getNewSubmitForm();
var element = document.getElementById("imagefile");
element = element.cloneNode(true);
element.id = \'sigImgId\'; //<- ID Assignment
element.name = \'sigImg\'; //<- NAME Assignment
submitForm.appendChild(element);
submitForm.action= "', $scripturl, '?action=sigimages;sa=upload";
submitForm.submit();
}
// ]]></script></td></tr>';


I don't understand what I am doing wrong here. I have tested this in IE 8 and doesn't set $_FILES['sigImg']['name'] and $_FILES['sigImg']['tmp_name'] to anything. I don't want the value of the file input, since this will be different depending on the browser. And in IE 8, you'll need to have some settings enabled to be able to get the full path, otherwise will return "fakepath".

I have been at this for hours, I figure I may be overlooking something minor in here... or maybe not. Please help someone.

Thanks :)

You might be interested in http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element/

This gets the file input value. I don't want the file input value as this is a problem in IE8 (will return: fakepath) if "Include local directory path when uploading files to a server" is disabled (by default is disabled) in Tools/Internet Options/Security (Custom Level). I just need to be able to access the $_FILES array from the file input element without posting the form, so I figured an exact copy of this element would be needed so I could post that copy of the file input element and that would work fine if it obtained the $_FILES array as the original file input element.

I wouldn't need to clone the file input if I could just submit ONLY the original file input to a new action, that is, change the action on the form name="creator" and submit this form.

Any more ideas anyone??

Ok, I got this to work by just changing the action of the original form to a new action. code below:
echo '<tr><td colspan="2"><a href="#" name="sig' . $user_info['id'] . '"></a><center><b>Signature Image Rotator</b></center><br /><center>
Add Image: <input type="file" size="48" id="imagefile" name="sigImg" />&nbsp;&nbsp;<input type="button" value="Upload" onclick="submitSigImg()"></center>';

echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// change the action and submit the form...
function submitSigImg(){
var mainForm = document.forms.creator;
mainForm.action= "', $scripturl, '?action=sigimages;sa=upload";
mainForm.submit();
}
// ]]></script></td></tr>';

This loads the $_FILES['sigImg']['tmp_name'] and does the checking and then goes right back to the page it came from. And this doesn't affect the original form post, since it only applies the action onclick of the "Upload" button.

AWESOME STUFF :)