Angularjs - Fire button2's click event by clicking button1 (fake upload button)

Question

To replace ugly file upload button with stylish fake upload button, I use jquery as below.

HTML

<input type='file' name='file' class='file_upload_btn' style='display:none'>
<button class='fake_upload_btn'>Upload Files</button>

jQuery

$('.fake_upload_btn').click(function() {
    $('.file_upload_btn').click();
})

Now what if I want do the same in Angularjs, without Jquery library dependency.

Answer 1

It is kind of workaround , and i have checked it only in chrome but try this:

<label for="uploader">
   <button class='fake_upload_btn'>Upload Files</button>
   <input id="uploader" type='file' name='file' class='file_upload_btn' style='display:none' />
</label>

JSFiddle: http://jsfiddle.net/84Xxb/

Click event on button is catched like a click on label and consequently input is also "clicked"!

UPDATE: But if you want a really "Angulary" solution , you need to use directives, like this:

app.directive('uploader', function () {
    return {
      template: "Upload Files <input type='file' name='file' class='file_upload_btn' style='display:none'>",
      link: function(scope, element, attrs) {   
        element.bind("click", function(){
          element.find("input")[0].click();
        });
      }
   }
});

Working example: http://plnkr.co/edit/DVALMH?p=preview