How can I trigger the click event of another element in ng-click using angularjs?
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');
});
}
};
});
So it was a simple fix. Just had to move the ng-click
to a scope click handler:
<input id="upload"
type="file"
ng-file-select="onFileSelect($files)"
style="display: none;">
<button type="button"
ng-click="clickUpload()">Upload</button>
$scope.clickUpload = function(){
angular.element('#upload').trigger('click');
};