I'm developing a web app in which I have a file upload option. The thing is, my file input is hidden, and instead, a textbox and a button are used, in order to style the input, copy the file input's value and allowing the user write a link address into the textbox (the php upload page recognizes the text in the textbox and takes action if the text is a hyperlink or a file upload).
The problem is, when I submit the form, the php is catching the file input's value as empty. So I removed the hidden property of the file input, in order to check what was wrong, and I noticed the input's value is being reset on form submit. When not hidden it takes me two button clicks to submit the form, being the first one the responsible for cleaning the file input. Though, if I assign it's value directly from the input object, it works perfectly.
What is going on?
Here's the code:
<form name="frmProject" id="frmProject" method="post" target="uploadTrg" enctype="multipart/form-data" action="upload.php">
<div>
<input type="textbox" class="frmObject" name="fakeFile" id="fakeFile" />
<button type="button" class="frmObject" id="btnFile" >
<img src="images/open.png" height="20" />
</button><br />
<input type="file" id="trueFile" name="trueFile" />
</div>
<input type="button" class="frmObject" id="postDetailButton" value="Save" />
</form>The javascript taking action into the submitting process (and form processing) is as follows:
$("#trueFile").live("change", function(){
$("#fakeFile").val($(this).val());
});
$("#postDetailButton").live("click", function(){
$("#frmProject").submit();
});
$("#btnFile").live("click", function(){
$("#trueFile").trigger("click");
});