hidden Input type='file' is not triggering when its parent div has been clicked

Question

Sorry if you find this question repetitive, but I looked around, tried, failed, so need your help.

one.html

 <html>
    <head>
    <link rel="stylesheet" href="one.css" >
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="one.js"></script>
    </head>
    <body>
       <div class='some-class' id="add-image">
            <input type="file" id="myfile" style="display:none" />
            <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
       </div>
   </body>
 </html>

one.css

.some-class{
border: 1px solid grey;
}

h4{
    text-align:center;
}

one.js

$("#add-image").click(function(){
  $("input[id='myfile']").click();
});

It shows sometimes

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

sometimes

uncaught rangeerror maximum call stack size exceeded

I don't know whats happening, if its a issue with the jquery version? Can you please help me? A working code sample or maybe a jsfiddle? Thank you in advance :)

Have you tried $('#myfile').click(); or $('#myfile').focus();? — Michal Trojanowski
– Michal Trojanowski, Commented Nov 27, 2013 at 13:10

Arun P Johny · Accepted Answer · 2013-11-27 15:26:58Z

3

You need to add the click handler within a dom ready handler because when one.js is executed the add-image element is not present in the dom structure

jQuery(function ($) {
    $("#add-image").click(function () {
        $("#myfile").click();
    });
})

Dom Ready

Since the file input element is within the myfile element triggering the click element on the file element will cause a recursive error saying callstack exceeded

The solution is to move the file element out of the myfile element

<input type="file" id="myfile" style="display:none" />
<div class='some-class' id="add-image">
     <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
</div>

Demo: Fiddle

edited Nov 27, 2013 at 15:26

answered Nov 27, 2013 at 13:08

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

9 Comments

the.big.lebowski Over a year ago

Not working Arun. Throwing error like this: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Uncaught RangeError: Maximum call stack size exceeded

Arun P Johny Over a year ago

event.returnValue is deprecated is a warning in new versions of browsers... hopefully jQuery will handle it in the new versions

Arun P Johny Over a year ago

can you give some more info about the call stack issue

the.big.lebowski Over a year ago

Means? I just put the error warning from the console. There's nothing more.

the.big.lebowski Over a year ago

I know. but the file upload dilogue is not opening.

|

rajesh kakawat · Accepted Answer · 2013-11-27 13:17:01Z

1

change your html to

     <div class='some-class' id="add-image">
        <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
    </div>
    <input type="file" id="myfile" style="display:none" />

answered Nov 27, 2013 at 13:17

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Comments

Alessandro Minoccheri · Accepted Answer · 2013-11-27 13:09:23Z

1

I thin kyou have missed the dom ready handler.
try this:

$(document).ready(function(){
  $("#add-image").click(function(){
     $("#myfile").trigger('click');
  });
});

answered Nov 27, 2013 at 13:09

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

1 Comment

the.big.lebowski Over a year ago

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Uncaught RangeError: Maximum call stack size exceeded

Collectives™ on Stack Overflow

hidden Input type='file' is not triggering when its parent div has been clicked

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related