When you click on the div block, the file selection window should appear. But in the console when you click the following error:

Uncaught RangeError: Maximum call stack size exceeded

 $('#test').click(function() { $("input[type='file']").trigger('click'); }) 
 #test { position: relative; text-align: center; width: 140px; height: 107px; background-color: rgba(0, 0, 0, .2); margin: 5px; border-width: 1px; border-style: solid; overflow: hidden; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="test"> <input type='file'> </div>

If <input type='file'> moved out of <div> , for example:

 <div id="test"></div> <input type='file'>

In this case, there is no error. But what if I need the <input> located inside a <div> ?

  • one
    A click on a diva triggers a click event on an input that pops up before a click on a diva, which causes ... Etc. - user207618
  • one
    $("input[type='file']").click(function(e) { e.stopPropagation(); }); - Igor

1 answer 1

Let's do the standard HTML tools.

Replace <div> with <label for="file-input-id"> where file-input-id is the file-input-id :

 <input type="file" id="my-file-input" hidden> <label for="my-file-input">Open file</label>

Reference to the working example: https://codepen.io/lukas-pierce/pen/RKzLWE