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

chovy

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.

J Savage Uphoff

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');
        });
      }
    };
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I trigger a JavaScript event click

Trigger click event of another element in angular?

Javascript/AngularJS: How do I make click event trigger parent?

Trigger click event from directive using AngularJS

How to trigger another function when i click on element with onclick atribute

AngularJS - how to trigger filter on ng-click

How can I trigger spinner event when on click?

How can I use the same click event to trigger fadeIn and fadeOut?

How to trigger click event on select element? (not change)

How to trigger the click event of a JQuery tab element

How can I trigger a click event for a React component using his id?

With angularjs, how can I trigger a click, or is there a better way?

How I can prevent the click event on a link which is nested on another element which also use onclick?

JS: Can't click one element to trigger click on another

How can I disable the ng-click event for a span?

How can I trigger an angularjs event handler from another handler?

How do I trigger a click event on an image?

How to Trigger an event on button click using jQuery

How can I pass a string in the click event with AngularJS?

Trigger click event for react element

Trigger click event on "a href" element

How i can emit event from directive by click outside of element?

How can I bind click event in repeater element in winjs?

How can i get mouse click event element in cocoa

How can I add an on click event on a div with multiple element inside

How can I get selected text on a element click event?

How to remove element focus for click event in AngularJs

How to trigger ng-click inside ng-repeat angularJS

Can't trigger event click inside ng-template angular