46

I have a HTML form (upload.htm) with a HTML file upload control inside of it.

<form id="frmupload" name="upload" enctype="multipart/form-data" action="uploadhandler.ashx" method="post">
    <input id="uploader" name="uploadctrl" type="file"/>
</form>

There is also one JavaScript method in the above page which goes like:

function performUpload(){
    document.getElementById('frmupload').submit();
}

I call this inside of a page (uploadpage.htm) from within an iframe:

<iframe id="docframe" src="upload.htm" style="display:none"></iframe>

I try to execute the statement shown below from the uploadpage.htm page:

var i = document.getElementById('docframe');
i.contentWindow.performUpload();

I get an error saying Access is denied, and my debugger halts at the first JavaScript function I've shown. Both the files are in the same location in the web project. They have the same domain name too. Why do I get this error then?

Of course, earlier, I could post the page: when I did not set the name attribute for the HTML upload control. But after I set the name attribute in HTML markup, I get this weird error. Why didn't I get this the first time?

Had a look @ this post --> "Access is denied" when script tries to access iframe in IE8, but it didn't help.

Community
  • 1
  • 1
deostroll
  • 10,935
  • 19
  • 77
  • 147

3 Answers3

97

IE doesn't allow manipulation of the type="file" input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an "Access is denied" error on the form submit - Internet Explorer is clever about remembering what methods have been invoked.

Similar issue: http://www.webdeveloper.com/forum/showthread.php?t=181272

Dunc
  • 16,506
  • 6
  • 74
  • 95
  • 3
    Have to reaffirm this answer. I was frantically looking for an issue with my form upload where in fact I was using the custom file input in IE and this was causing the Access is Denied issue. Great insight, thx – Conor Power Sep 19 '12 at 23:46
  • What am I missing? This fiddle seems to prove this answer wrong; using Ender/Bean instead of jQuery I've got IE9 opening the file picker and submitting the form to a generated iframe all via JS and it appears to work: http://jsfiddle.net/NkycS/27/ – RwwL Dec 06 '12 at 23:32
  • 5
    Aha, I got it — my file input didn't have a name attribute on it. As soon as I add one, I do get the access denied error: http://jsfiddle.net/NkycS/32/ – RwwL Dec 07 '12 at 17:07
  • Best answer for this here: http://stackoverflow.com/questions/572768/styling-an-input-type-file-button?noredirect=1&lq=1 Answer by Josh Crozier – agapitocandemor Mar 19 '17 at 12:35
13

Traditionally, JavaScript access to HTML input type="file" is severely limited for security concerns. AFAIK, You can't do the following with JS on a file uploader element:

  1. You cannot read the "value" of the element as it holds the filename.
  2. You can't fire up the file selection menu via JS.
  3. You can't fire submit of the file uploader control via JS.

All this is in place to prevent malicious attacks like stealing your files in background via JS. I haven't played with an input type="file" element in a while but my best guess is you will hit similar issues (if not all) in other browsers as well.

Your best bet is a Flash based solution or maybe some new HTML5 control.

Also, here is an official reference on the subject matter:

http://msdn.microsoft.com/en-us/library/ms535263(v=vs.85).aspx

Check "Community Content" all the way on the bottom of the above page.

Volker E.
  • 5,443
  • 11
  • 43
  • 62
Rajat
  • 29,134
  • 17
  • 60
  • 84
0

In both the HTML files — the one which is in the frame and another which contains the frame — try adding document.domain='example.com' where 'example.com' is your domain name.

TRiG
  • 9,249
  • 6
  • 50
  • 101
Gaurav Saxena
  • 4,167
  • 3
  • 17
  • 17