CODEWITHSUNDEEP
javascriptjquerycssiframefile-upload
Vedant Terkar
Vedant Terkar

Reputation: 4682

File Upload Using Javascript returns 'Access Denied' Error With Stylized <input type='file' > to a button

I have stylized My File input using :

<html>
<head>
<style>
#yourBtn{
 position: relative;
 top: 150px;
 font-family: calibri;
 width: 150px;
 padding: 10px;
 border-radius: 5px;
 border: 1px dashed #ddeeff; 
 text-align: center;
 background-color: #ffddee;
 cursor:pointer;
 color:#333333;
}
</style>
<script type="text/javascript">
 function getFile(){
document.getElementById("upfile").click();
 }
 function sub(obj){
 document.getElementById("yourBtn").innerHTML = "Uploading Please Wait...";
 document.myForm.submit();
 event.preventDefault();
 }
</script>
</head>
<body>
<center>
<form action="/sub/upload.php" method="POST" enctype="multipart/form-data" name="myForm" target="myiframe">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" name="upload" style="display:none;" onchange="sub(this)" /></div>
</form>
<iframe name="myiframe" style="width:100;height:100;border:2px solid #bbccdd;"></iframe>
</center>
</body>
</html>

The Problem is .submit() function returns the ' Access Denied ' error on IE (tested in IE8 and 9). Works fine in all other browsers (chrome,opera,safari and Firefox). when the sub(obj) is invoked. And The same is happening even if i use Jquery also.

So Can any one tell me how should i get this script working on IE ?

Upvotes: 6

Views: 13250

Answers (2)

War10ck
War10ck

Reputation: 12508

As noted above IE does not allow you to open the dialog and submit a file on the user's behalf through javascript. That being said, your idea of styling the "file input" is completely valid.

This link may help you with that:

Styling File Inputs

It's a buggy work around to say the least but the general gist is this:

  1. Create a file input and set the opacity using css to 0.0. Do not set visibility as this will disable the input.
  2. Style a regular text input to your liking using CSS so that it looks like the file input you desire.
  3. Position the text input and add a z-index of 0.
  4. Position your file input (that is completely transparent) and give it z-index of 1.

  5. Write javascript to pull the value of the file input (i.e. in jQuery 

    $('input[type="file"]').val();

    and place it in the text input.

The idea here is that the file input is still pulling the file and the user is still choosing the file. You're in a sense, masking it and making it appear as if you have a custom control. Really, your fake control is behind the real one which is simply transparent.

Hope this helps

Upvotes: 5

Ray Nicholus
Ray Nicholus

Reputation: 19890

This will never work. IE does not allow you to invoke the "choose file" dialog via javascript AND submit the associated form via javascript. If you attempt this, as you have seen, IE will throw an error on form submission. You must allow the user to click the input element themselves.

Upvotes: 0

Related Questions