jQuery child file upload click

Question

I tried to run the code as and its working

<input type="file" />
<div class="image">

</div>
$('.image').click(function() {

    $('input').trigger('click');
});

Now, I want the code as

<div class="image">
<input type="file" />    
</div>
$('.image').click(function() {
    $(this).find('input').trigger('click');
});

and, I am not sure why this is not working.

possible duplicate of Jquery click trigger gives error 'Maximum call stack size exceeded ' — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jul 4, 2015 at 7:03

m4n0 · Accepted Answer · 2015-07-04 07:35:52Z

1

Problem is:

Error: Too much recursion

Solution:

$('.image').click(function(event) {
  if (!$(event.target).is('input')) {
    $(this).find('input').trigger('click');
  }
});

input[type=file] {
  display: none;
  height: 0;
  width: 0;
}
.image {
  height: 100px;
  width: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="image">
  <input type="file" />
</div>

answered Jul 4, 2015 at 7:09

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

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

1 Comment

awesome, this works. I am not sure who is the person clicking on -1's to all answers.