"SCRIPT5 Access is denied" error on IE9 when firing .click() from onchange

Question

We want to reduce the number of steps it takes for a user to upload a file on our website; so we're using jQuery to open and postback files using the below markup (simplified):

<a onclick="$('#uplRegistrationImage').click();">
    Change profile picture
</a>

<!-- Hidden to keep the UI clean -->
<asp:FileUpload ID="uplRegistrationImage" 
                runat="server" 
                ClientIDMode="static"
                Style="display:none"
                onchange="$('#btnSubmitImage').click();"    />

<asp:Button runat="server" 
            ID="btnSubmitImage" 
            ClientIDMode="static" 
            Style="display:none" 
            OnClick="btnSubmitImage_OnClick" 
            UseSubmitBehavior="False" />

This works absolutely fine in Firefox and Chrome; opening the file dialog when the link is clicked and firing the postback when a file is selected.

However in IE9 after the file upload has loaded and a user has selected a file; insteaed of the OnChange working I get a "SCRIPT5 Access is denied" error. I've tried setting an arbitrary timeout, setting intervals to check if a file is given to no avail.

There are a number of other questions relating to this; however none appear to have a decent answer (One said set the file dialog to be transparent and hover behind a button!)

Has anyone else resolved this? Or is it absolutely necessary that I provide a button for IE users?

Why aren't you just sending the onclick on your to the same function as the onclick of $('#uplRegistrationImage')? — michael.orchard, Nov 08 '12 at 14:09
The onclick opens the file dialog; the should trigger a postback whenever a file is selected. — Luke Merrett, Nov 08 '12 at 14:13
I had the same issues in Safari, so I guess IE9 has taken the same stance that click() actually requires a user click, which from a security standpoint, you can probably understand. — samazi, Nov 08 '12 at 14:18
Did you find any way around it or did you end up just providing a button? — Luke Merrett, Nov 08 '12 at 14:26
I ended up changing the application structure to abstract the relevant parts out. I was only using it as a shortcut, I was not tied to code behind/post back application structure. There is a way to access code behind methods directly from jquery though which might be some help to you. I would suggest using jQuery to link directly into your code behind. You can read about that at http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ — samazi, Nov 08 '12 at 14:31
@Click-Rex, I just found this: http://forums.asp.net/t/1573660.aspx/1 which looks like you just need to use an asp:Button instead of the tag and you should have a workaround. — samazi, Nov 08 '12 at 14:36
@SandorA just tried it on IE9 to no avail; the postback is still being blocked by the same error. Cheers for the article though — Luke Merrett, Nov 08 '12 at 15:03
Are you sure that `$('#btnSubmitImage').click();` causes this? — n.podbielski, Nov 14 '12 at 10:56
Could it be because I'm opening the uploader dialog from javascript using `$('#uplRegistrationImage').click();` ? — Luke Merrett, Nov 14 '12 at 13:34

score 13 · Accepted Answer · edited May 23 '17 at 11:33

For security reasons, what you are trying to do is not possible. It seems to be the IE9 will not let you submit a form in this way unless it was an actual mouse click on the File Upload control that triggers it.

For arguments sake, I was able to use your code to do the submit in the change handler, but it worked only when I clicked the Browse button myself. I even set up polling in the $(document).ready method for a variable set by the change handler that indicates a submission should be triggered - this didn't work either.

The solutions to this problem appear to be:

Styling the control in such a way that it sits behind a button. You mentioned this in your question, but the answer provided by Romas here In JavaScript can I make a "click" event fire programmatically for a file input element? does in fact work (I tried in IE9, Chrome v23 and FF v15).
Using a Flash-based approach (GMail does this). I tried out the Uploadify demo and it seems to work quite nicely.

Styling a File Upload:

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

References:

jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?

IE9 file input triggering using Javascript

getting access is denied error on IE8

Perfect answer cheers Nick. We ended up using [FineUploader](http://fineuploader.com/) with a HTTP Handler; achieving roughly the same solution with a lot more boiler plate code. — Luke Merrett, Nov 15 '12 at 09:40
Weird, this jsfiddle seems to prove this answer wrong: http://jsfiddle.net/NkycS/27/ The file input click is triggered via JS, and so's the submit, and it works in IE9. Wonder if I'm missing something. — RwwL, Dec 06 '12 at 23:18
Yep, I was missing something: 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:08

score 3 · Answer 2 · answered Jul 01 '16 at 07:04

Hey this solution works. for download we should be using MSBLOB

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

score 2 · Answer 3 · answered Nov 08 '12 at 17:48

This solution looks like it might work. You'll have to wrap it in a <form> and get it to post in the jquery change handler, and probably handle it in form_load using the __eventtarget or and iframe or whatever it is that web forms uses, but it allows you to select a file, and by submitting the form, it should send it. I can't test it however, since I don't have an environment set up at home.

http://jsfiddle.net/axpLc/1/

<a onclick="$('#inputFile').click();">
    Change profile picture
</a>
<div id='divHide'>

    <input id='inputFile' type='file' />

</div>


$('#inputFile').change(function() { alert('ran'); });

#divHide { display:none; }

score 0 · Answer 4 · answered Nov 12 '12 at 21:31

Well, like SLC stated you should utilize the <Form> tag.

First you should indicate the amount of files; which should be determined by your input fields. The second step will be to stack them into an array.

<input type="file" class="upload" name="fileX[]"/>

Then create a loop; by looping it will automatically be determined based on the input field it's currently on.

 $("input[@type=file]:nth(" + n +")")

Then you'll notice that each file chosen; will replace the input name to the file-name. That should be a very, very basic way to submit multiple files through jQuery.

If you'd like a single item:

$("input[@type=file]").change(function(){
   doIt(this, fileMax);
 });

That should create a Div where the maximum file found; and attaches to the onEvent. The correlating code above would need these also:

 var fileMax = 3;
 <input type="file" class="upload" name="fileX[]" />

This should navigate the DOM parent tree; then create the fields respectively. That is one way; the other way is the one you see above with SLC. There are quite a few ways to do it; it's just how much of jQuery do you want manipulating it?

Hopefully that helps; sorry if I misunderstood your question.

"SCRIPT5 Access is denied" error on IE9 when firing .click() from onchange

4 Answers4

Linked

Related