Need File Input Element cloned from 1 form into another via PHP & Javascript

Question

Ok, I have an in template function 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 tag defined above the code and than below the code, closing the form with 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. I am using PHP and Javascript to accomplish what I have now, but the cloneNode(true) isn't getting the $_FILES['image'] array and setting it to the $_FILES['sigImg'] array :(

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, clones <input type="file" name="image">,
//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>';

How can I get a real clone of the file input defined in the php echo and place it into the form defined in the createFormAndSubmit() function??

Please, somebody help...

Answer 1

The Mark Allen comment on the other thread is suggesting that instead of appending your new cloned input (which IE doesn't give the selected file property) to the other form, you replace the old input with the new input (which looks proper), and then you put the old input on your upload form.

So your code would become:

// clone up a new one
var oldFile = document.getElementById("imagefile");
var newFile = oldFile.cloneNode(true);

// set props
newFile.id = "sigImgId"; //<- ID Assignment
newFile.name = "sigImg"; //<- NAME Assignment

// replace old with new
oldFile.parentNode.replaceChild(newFile, oldFile);

// attach old to upload form
submitForm.appendChild(oldFile);

Answer 2

Ok, thanks a lot Chris, will definitely keep this in mind. Had just figured out a way to fix this myself and am using this method which just changes the form's action and submits, only problem it submits everything in the form instead of just the imagefile object. But I guess that's not really a problem, or is it? Anyways works with this code:

// change the action and submit the form...
function submitSigImg(){
 var mainForm = document.forms.creator;
 mainForm.action= "', $scripturl, '?action=sigimages;sa=upload";
 mainForm.submit();
}

This just changes the action of the form it is already in and since this function only gets used on clicking of the upload button and redirects back to the page, it isn't a problem when submitting the form normally either.

Thanks Again :)