title: Ember - Use View Click event to trigger click of File Input element
body: <p>I want to handle the click event of a View and trigger a click on a file input element. </p>
  
  <p>I also don't want to show the 'ugly' input element box, so I have used CSS to push it off viewport and set opacity to 0.</p>
  
  <pre><code>input[type='file'] {
    opacity: 0;
    top: -100px;
    position: absolute;
  }
  </code></pre>
  
  <p>I did a mockup in HTML with jQuery, and it works exactly as I want. Refer link: <strong><a href="http://jsfiddle.net/H7kvP/" rel="nofollow">JSFIDDLE</a></strong></p>
  
  <p>I also tried to implement the same in Ember, and it is throwing an error of </p>
  
  <blockquote>
    <p>Uncaught RangeError: Maximum call stack size exceeded </p>
  </blockquote>
  
  <p>FYI, here is the Ember - <strong><a href="http://emberjs.jsbin.com/giqunoya/1/" rel="nofollow">JSBIN</a></strong></p>
  
  <pre><code>// View
  App.DropView = Ember.View.extend({
    templateName: 'dropView',
  
    click: function(event) {
  
      $("input[type='file']").click();
      event.preventDefault();
  
    }
  });
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;!-- Template --&gt;
  &lt;script type='text/x-handlebars' data-template-name='dropView'&gt;
      &lt;a href="javascript:void(0)"&gt;Click Me&lt;/a&gt;
      &lt;input type='file' id='files'&gt;
  &lt;/script&gt;
  </code></pre>