Triggering file select window from a different place

Question

I have a HTML form like this one:

<style>.hidden { display: none; }</style>

<form method="post" action="upload">
    <div id="dropzone" class="pre-upload">
        <div class="comp">
            <h1>Drop your images here</h1>
            <p>or simply click to select them.</p>
            <input type="file" name="images" id="upload_button" class="hidden" />
        </div>
            <div class="fing">
                <p>Tap to select your images</p>
            </div>
    </div><!-- Pre upload div -->
</form>

I want to make #dropzone open up the standard file selecting window if it's clicked. It should open up #upload_button's file selector specifically.

I've tried the following, but it didn't work:

$('#dropzone').click(function(){
    $('#upload_button').click();
});

As you see, I'm trying to achieve this result via jQuery.

I thought this would trigger the window, but it's simply doing nothing.

@ The ones who are voting to close this down:

As you see, my issue was totally not answered in the other question you are linking to. This was a different issue with nesting my input wrongly. So, before going and blindly voting for a close, better check the provided code and try to see if the issue is somewhat different from the common. This is a site for help after all.

Have a look to this answer: http://stackoverflow.com/questions/793014/jquery-trigger-file-input — MarcoL, Dec 04 '13 at 19:49

beercodebeer · Accepted Answer · 2013-12-04T20:04:20.883

It looks like a circular reference problem. Your file upload button is inside the div you want to click to trigger the button. Triggering the click on the button from the div, also triggers the click on the div, so it infinitely recurses.

If you watch the console, you'll see you get a "Maximum call stack size exceeded" error.

Moving the button outside of the div you want to click causes it to function as intended.

Here's a jsfiddle to demonstrate the problem.

Triggering file select window from a different place

@ The ones who are voting to close this down:

1 Answers1