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, Nov 27 '13 at 13:10

Arun P Johny · Answer 1 · 2013-11-27T15:26:58.493

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 '13 at 15:26

answered Nov 27 '13 at 13:08

Arun P Johny

365,836
60
503
504

**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 – the.big.lebowski Nov 27 '13 at 15:21
`event.returnValue is deprecated` is a warning in new versions of browsers... hopefully jQuery will handle it in the new versions – Arun P Johny Nov 27 '13 at 15:23
can you give some more info about the call stack issue – Arun P Johny Nov 27 '13 at 15:23
Means? I just put the error warning from the console. There's nothing more. – the.big.lebowski Nov 27 '13 at 15:25
I know. but the file upload dilogue is not opening. – the.big.lebowski Nov 27 '13 at 15:26
got the problem with callstack, you need to make a minor change in the markup – Arun P Johny Nov 27 '13 at 15:26
And Arun, can I ask one more thing please? Is there any way I can show that image on this div after selecting from the upload dialog? Actually I'm new in Jquery want to learn more :) – the.big.lebowski Nov 27 '13 at 15:43
you can look at the html5 file API – Arun P Johny Nov 27 '13 at 15:43
search for html5 image preview like http://stackoverflow.com/questions/14069421/in-html5-how-to-show-preview-of-image-before-upload – Arun P Johny Nov 27 '13 at 15:44

score 1 · Answer 2 · answered Nov 27 '13 at 13:09

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 '13 at 13:09

Alessandro Minoccheri

32,975
19
110
159

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Uncaught RangeError: Maximum call stack size exceeded – the.big.lebowski Nov 27 '13 at 15:27

score 1 · Accepted Answer · answered Nov 27 '13 at 13:17

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 '13 at 13:17

rajesh kakawat

10,330
1
18
38

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

3 Answers3