javascript Programmatically select a file in Input type file inside a iframe and upload gives Access is denied error

Question

I have a iframe inside a main page. The when a button(inside form1) is clicked inside the iframe, it makes a AJAX call and the response html will be a input type file and input type button inside a form(say form2) and the response will be put in a div to show it as a popup over the normal screen. Using the input type file is user is able to select a file and when button is clicked it will call a function to submit the form and the file wil be uploaded to server.

The requirement is to programmatically click the input type file and display the file open dialog. When the user selects a file, we need to programmatically click the button to submit to the server.

I tried to programmatically click the input type file through javascript from the main page after AJAX response is populated. User is able to select file but programmatically click the button results in "Access is denied" error in IE.

I do not use any js library. Do i need to use any additional library to achieve this?

Answer 1

The requirement is to programmtically click the input type file and display the file open dialog.

This requirement cannot be reliably fulfilled. Some browsers will respond to click() on an input type="file", others won't, others (IE) appear to permit it but then refuse to actually submit the form.

There is no workaround and no library can avoid the limitation—short of going to some non-HTML means of uploading a file such as Flash or Java.

What's more there is nothing in the HTML standard that requires there to even be a file open dialog. This is a browser- and OS-specific interface detail. Other platforms than Windows desktop browsers may have other mechanisms for submitting files, such as drag and drop. You can't meaningfully interact at this level with a file upload field.

When the user selects a file, we need to programmtically click the button to submit to the server.

Well that bit's doable. Catch the change event:

<form method="post" action="..." enctype="multipart/form-data">
    <input type="file" id="f"/>
</form>

document.getElementById('f').onchange= function() {
    if (this.value!=='')
        this.form.submit();
};