How can I trigger the click event of another element in ng-click using angularjs?

angularjs

Solution

If your input and button are siblings (and they are in your case OP):

<input id="upload"
    type="file"
    ng-file-select="onFileSelect($files)"
    style="display: none;">

<button type="button" uploadfile>Upload</button>

Use a directive to bind the click of your button to the file input like so:

app.directive('uploadfile', function () {
    return {
      restrict: 'A',
      link: function(scope, element) {

        element.bind('click', function(e) {
            angular.element(e.target).siblings('#upload').trigger('click');
        });
      }
    };
});

Problem

I'm trying to trigger the click event of the `<input type="file">` element from the `button`. ``` <input id="upload" type="file" ng-file-select="onFileSelect($files)" style="display: none;"> <button type="button" ng-click="angular.element('#upload').trigger('click');">Upload</button> ``` It's common practice to hide the uglified beast known as `<input type=file>` and trigger it's click event by some other means.

Original source