Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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...

    Code:
    	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
    Last edited by SoLoGHoST; 05-17-2009 at 06:32 PM. Reason: making code easier to see...

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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??
    Last edited by SoLoGHoST; 05-17-2009 at 06:42 PM.

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Got It

    Ok, I got this to work by just changing the action of the original form to a new action. code below:
    Code:
    	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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •