getting hidden input type=file to work as desired

Question

I'm trying to do a hidden file upload to iframe and i'm stuck. What seems to be not working is choosing a file. When I unhide form controls and use them everything works fine. If I use form controls to pick a file and then submit form via "send" link - it works fine. When i use choose file link, I can see that file control filled up with the file I chose, but submit button does not submit the form or the file does not get uploaded. As a result I cant chain those to have my file automagically uploaded right after I chose it.

Please show me what am I doing wrong.

<div class="fileuploader">

<form id="fileupload" action="@Url.Action("UploadFile","Publication")"
      method="post" enctype="multipart/form-data" target="upload_target" >
style="display:none"
<input id="filetoupload" name="filetoupload" type="file" /><`enter code here`br />
<input id="submitbutton" type="submit" name="submitBtn" value="Upload" />
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width: 0; height: 0;
border: 0px solid #fff;"></iframe>
</div>
<div>

<a href="#" id="choosefile">choose a file</a>
<a href="#" id="send">send</a>

</div>

<script type="text/javascript">
$("#send").click(function(){$("#submitbutton").click();});
        $("#choosefile").click(function () { 
  $("#filetoupload").click();
        });
</script>

Answer 1

Scripting access to File Input form element is very limited. You can't programatically click the "Browse" button of that control.

The only way around having to use the standard html control is using a flash library such as SwfUpload that among other things lets you customize the "Browse" button