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?

It appears our problem is caused by the fact that we do not call our "clicky()" method from a click event, but from a seperate browser event. It does not show in this example, but our actual application code was not an option to just copy&paste it here. — Vincentz
– Vincentz, Commented Sep 26, 2012 at 7:59
I have the same problem. :( Could you give a hint about how to fix it? — Danyal Aytekin
– Danyal Aytekin, Commented Oct 22, 2012 at 16:27

lvanberkel · Accepted Answer · 2012-09-25 16:30:40Z

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.

answered Sep 25, 2012 at 16:30

lvanberkel

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Over a year ago

If you have Python installed python -m SimpleHTTPServer is a good alternative for getting around this issue.

Collectives™ on Stack Overflow

triggering file input within an iframe in Chrome with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related