triggering file input within an iframe in Chrome with javascript

Question

I am trying to work around the ugly browser specific upload button in my company's web framework.

What I have created is a hidden iframe with a form in it. Outside of the iframe is a "choose files" button. The button retrieves the input element from the iframe and calls "click()" on it.

The click opens the file choose dialog in IE and FF, but not in Chrome. Calling the "click()" from within the iframe in a javascript function did not work either for Chrome.

Some example code:

fileuploadtest.html:

<div id="button" style="background-color:red; height:50px; width:200px;" onclick="clicky()">Browse files</div>
<iframe id="frame" src="fileupload.html" style="display:none"></iframe>

<script type="text/javascript">
    function clicky() {
        var iframe = document.getElementById("frame");
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        innerDoc.getElementById("input").click();
    };   
</script>

fileupload.html:

<form>
    <div><input type="file" id="input" multiple/></div>
</form>

By eliminating the iframe and just having the form within the first page, Chrome opens the file chooser dialog like I want. However, I have to use an iframe in our web application, so that I can submit it separately.

Removing "display: none" has no effect. When an "onclick" attribute is added to the input element, it gets triggered by the "click()" event of Chrome.

Why does Chrome not open the file chooser dialog when calling "click()" on the input within the iframe?

Answer 1

Chrome treats every file path as a different origin. When I host your example in a server it works fine in Chrome. You could also start Chrome with "--allow-file-access-from-files" as a parameter to circumvent this security measure .