File Upload Using JavaScript Returns 'Access Denied' Error with Stylized <Input Type='File' > to a Button

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

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

Styling an input type=file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

getting access is denied error on IE8

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

ie javascript form submit with file input

I found the answer myself, After 2 days of crazy trial&error. I hope I can help somebody with this..

I removed the hidden file input field from my coldfusion page and replaced it by an iframe tag. That iframe tag linked to another coldfusion page, containing another form with the removed file input field.
Now when I use javascript to click the file input field, which is still hidden from view, it still gives the browse file dialog without a hitch. But when I use javascript to submit the form, through the iframe, miraculously, it submits the form in the iframe, making it possible to upload the file in some serverside scripting of your preference.

iframe code:

<form id="formFileUpload" class="formFileUpload" name="formFileUpload" method="post" action="../actions/act_upload_file.cfm" autocomplete="off" enctype="multipart/form-data">
    <input type="file" class="buttonFileHidden" id="inputFile" name="partnersLogo" />
</form>

iframe itself:

<iframe src="admin/dsp_file_upload.cfm" id="ifu" name="ifu" class="buttonFileHidden">
</iframe>

javascript click & submit:

ifu.document.formFileUpload.partnersLogo.click();
ifu.document.formFileUpload.submit();

Access denied error in IE when submitting form through javascript

IE8 doesn't support invoking the .submit() event of a form containing file inputs from within the .change() event of this file input. This is for security reasons. You are attempting to submit a file to the server without the user explicitly allowing this. One possible workaround is to call the .submit() on the form from within a .click() event of some button you have placed:

$('.uploadButton').click(function () {       
    $('#ImgForm').submit();
});

Now when the user clicks on some upload button the form will submit.

It's worth mentioning that this is only problematic with IE8. Higher versions and other browsers do not have this limitation.

Also you may consider using a Flash based upload control such as Uploadify or BlueImp File upload to upload files to the server in a cross browser way.

Invisible FileUpload control causes error on javascript postback in IE

It is unresolvable security issue of IE (only) that does not allow to send form with hidden file upload input. Thank you very much for your help.

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

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:

1. 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).
2. 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

---

Related Topics