Gmail file attachment secret! (input=file)

Ever since I started using gmail - One thing always bothered me is how they managed to hide the file control (input=file) and still be able to submit the form.

I have seen numerous solution i.e. Stick Blog has nice solution but it requires you to enable atleast one file control.

The problem is browser (IE) will not let you select the file programmatically (for security reasons) - The file has to be manually selected by user (Some people here claims that it use to work in IE.5.5 and Microsoft seems to have fixed this security hole in later version along with myriads of other security issues. Anyway the smart pants at google figured out a workaround this via use of <iframe&t; . So the trick is to invoke the click() from another window/frame.

Here is how it works

You have a one.htm file which contains your form and file elements

<form action="url" method = "post" enctype="multipart/form-data">

Then you have a file control in this form

<input id="file1" type=" file" name="file1">


Now in the second html page - you have a some code like this

<iframe name="frame1" src="one.htm" width="1" height="1">

and lets say you have anchor tag
<a onclick="selectFile()" href="#">Choose a file </a>

and you have a script like this to choose a file

<script>
function selectFile()
{
//first get the iframe
var frm1 = window.frames["frame1"]

//get the file control form iframe
var filecontrol = frm1.document.getElementById("file1")

//invoke the click() on the file control in iframe
file1.click();
}
</script>

You could also have the a submit button on this frame to trigger the submit in the iframe

<a href="#" onclick="dosubmit()" > Submit the form <a>

and the following doSubmit() will actually submit the form

<script>
function doSubmit()
{
//first get the iframe
var frm1 = window.frames["frame1"]

//get the form control form iframe
var form1 = frm1.document.forms[0]

//submit the form
form1.submit()

}

</script>