submitting the form upon file selection

Hello

I have a form with several input tags. One of them is a type=file tag.
I would like the form to be submitted automatically as soon as the user chooses a file.

I tried to change the appearance of the file input but making it invisible, and placing a regular button on top of it. upon the onclick of the button I invoked:"document.myForm.file.click"
This seemed to open the file dialog. will this solution work?
I heard that for security reason, the file input tag cannot be overriden.

Here is a sample of my code:

<form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
<input type="file" id="file" name="file" style="display:none" onchange="this.form.submit()">
<input type="button" value="click to pick a file" onclick="this.form.file.click();">
<input type="text" name="text">
<input type="submit" value="submit">
</form>


The user will have two ways of submitting the form:
* clicking the 'submit' button
* selecting a file using the file selector - this should automatically submit the form.

The problem is the when I choose a file, I get a JavaScript error saying: access is denied.

I would like also to make sure that the user can only select files of a certain extension from the file select dialog. i.e; image/jpeg, image/png, image/gif
Is there a way of setting those extensiosn for the file dialog?
I heard about the accept attribute, but read somewhere that it is ignored by the browser.

thanks

No need to complicate things, this should work fine:

<form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
<input type="file" id="file" name="file" onchange="this.form.submit()">
<input type="submit" value="submit">
</form>

Is there a way to restrict the file types that the user can choose from in the file dialog window?

I can always check the extension of the file after the file gets selected, but I would like to be able to set the valid extensions that the user will be able to pick FROM.

If this is possible

thanks

And for your second question something like this ought to get you thinking about an actual solution to your problem:



<script type="text/javascript">
function check_pic(val,frm){
if(!/[^/].(?:gif|jpeg|jpg|png|bmp)/i.test(val)){
alert("Please select an image with one of the following extentiosn:\n\n gif, jpeg, jpg, png, bmp");
}else{
frm.submit()
}
}
</script>

<form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
<input type="file" id="file" name="file" onchange="check_pic(this.value,this.form)">
<input type="submit" value="submit">
</form>