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

Question

I m trying to trigger the click event of the  lt input type  file  gt  element from the button    lt input id  upload      type  file      ng-file-select  onFileSelect  files       style  display  none   gt    lt button type  button      ng-click  angular element   upload   trigger  click     gt Upload lt  button gt    It s common practice to hide the uglified beast known as  lt input type file gt  and trigger it s click event by some other means

User · Answer

I think you are over complicated things a bit. Do you really need to trigger a click on the input from your button ?

I suggest you just apply a proper style to your input and the ngFileSelect directive will do the rest and call your onFileSelect function whenever a file is submitted :

input.file {
    cursor: pointer;
    direction: ltr;
    font-size: 23px;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-300px, 0px) scale(4);
}

User · Answer

I just came across this problem and have written a solution for those of you who are using Angular  You can write a custom directive composed of a container  a button  and an input element with type file  With CSS you then place the input over the custom button but with opacity 0  You set the containers height and width to exactly the offset width and height of the button and the input s height and width to 100  of the container   the directive  angular module  myCoolApp      directive  fileButton   function          return         templateUrl   components directives fileButton fileButton html         restrict   E         link  function  scope  element  attributes             var container   angular element   file-upload-container            var button   angular element   file-upload-button             container css               position   relative               overflow   hidden               width  button offsetWidth              height  button offsetHeight                                     a jade template if you are using jade  div class  file-upload-container        button class  file-upload-button         input file-upload class  file-upload-input   type  file   onchange  doSomethingWhenFileIsSelected         the same template in html if you are using html   lt div class  file-upload-container  gt      lt button class  file-upload-button  gt  lt  button gt      lt input class  file-upload-input  id  file-upload  type  file  onchange  doSomethingWhenFileIsSelected      gt    lt  div gt    the css   file-upload-button       margin-top  40px      padding  30px      border  1px solid black      height  100px      width  100px      background  transparent      font-size  66px      padding-top  0px      border-radius  5px      border  2px solid rgb 255  228  0        color  rgb 255  228  0      file-upload-input       position  absolute      top  0      left  0      z-index  2      width  100       height  100       opacity  0      cursor  pointer

User · Answer

So it was a simple fix  Just had to move the ng-click to a scope click handler    lt input id  upload      type  file      ng-file-select  onFileSelect  files       style  display  none   gt    lt button type  button      ng-click  clickUpload    gt Upload lt  button gt      scope clickUpload   function        angular element   upload   trigger  click

User · Answer

for jqLite just use triggerHandler with event name  To simulate a  click  try     x000D   x000D  angular element  tr   triggerHandler  click    x000D   x000D   x000D    Here s the list of jQLite commands

User · Answer

Simply have them in the same controller  and do something like this   HTML    lt input id  upload      type  file      ng-file-select  onFileSelect  files       style  display  none   gt    lt button type  button      ng-click  startUpload    gt Upload lt  button gt    JS   var MyCtrl       scope     upload   function  scope   upload       scope files          scope startUpload   function        for  var i   0  i  lt   scope files length  i             upload  scope files i                  scope onFileSelect   function  files          scope files    files             This is  in my opinion  the best way to do it in angular  Using jQuery to find the element and trigger an event isn t the best practice

User · Answer

If your input and button are siblings  and they are in your case OP     lt input id  upload      type  file      ng-file-select  onFileSelect  files       style  display  none   gt    lt button type  button  uploadfile gt Upload lt  button gt    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

User · Answer

I took the answer posted by Osiloke  Which was the easiest and most complete imho  and I added a change event listener  Works great  Thanks Osiloke  See below if you are interested   HTML      lt div file-button gt           lt button class  btn btn-success btn-large  gt Select your awesome file lt  button gt      lt  div gt    Directive   app directive  fileButton   function       return       link  function scope  element  attributes           var el   angular element element        var button   el children   0         el css           position   relative           overflow   hidden           width  button offsetWidth          height  button offsetHeight                 var fileInput   angular element   lt input id   scope file button id   type  file  multiple   gt          fileInput css           position   absolute           top  0          left  0           z-index    2           width   100            height   100            opacity   0           cursor   pointer                  el append fileInput        document getElementById scope file button id  addEventListener  change   scope file button open  false                    Controller    scope file button id    wo files        scope file button open   function        alert  Files are ready

User · Answer

I had this same issue and this fiddle is the shizzle    It uses a directive to properly style the file field and you can even make it an image or whatever   http   jsfiddle net stereosteve v5Rdc 7    x000D   x000D    globals angular true   x000D  var buttonApp   angular module  buttonApp       x000D   x000D  buttonApp directive  fileButton   function     x000D    return   x000D      link  function scope  element  attributes    x000D   x000D        var el   angular element element  x000D        var button   el children   0  x000D   x000D        el css   x000D          position   relative   x000D          overflow   hidden   x000D          width  button offsetWidth  x000D          height  button offsetHeight x000D           x000D   x000D        var fileInput   angular element   lt input type  file  multiple   gt    x000D        fileInput css   x000D          position   absolute   x000D          top  0  x000D          left  0  x000D           z-index    2   x000D          width   100    x000D          height   100    x000D          opacity   0   x000D          cursor   pointer  x000D           x000D   x000D        el append fileInput  x000D   x000D   x000D        x000D      x000D     x000D   lt div ng-app  buttonApp  gt  x000D   x000D     lt div file-button gt  x000D       lt button class  btn btn-success btn-large  gt Select your awesome file lt  button gt  x000D     lt  div gt  x000D   x000D     lt div file-button gt  x000D       lt img src  https   www google com images srpr logo3w png    gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The solution  as pointed out by other answers  is to use  angular element element  trigger event     Here s an example of how I randomly select multiple select elements    scope randomize   function        var games      slice call document querySelectorAll   games select          games forEach function e              Logically change the element  Angular won t know about this          e selectedIndex   parseInt Math random     100  10   lt  50   1   2              Manually tell Angular that the DOM has changed         angular element e  trigger  change

User · Answer

One more directive   html   lt btn-file-selector  gt    code   directive  btnFileSelector   function      return       restrict   AE        template    lt div gt  lt  div gt         link  function s e a          var el   angular element e         var button   angular element   lt button type  button  class  btn btn-default btn-upload  gt Add File lt  button gt            var fileForm   angular element   lt input type  file  style  display none    gt             fileForm on  change   function                Actions after the file is selected          console log  fileForm 0  files 0  name                     button bind  click  function            fileForm click                          el append fileForm        el append button

User · Answer

If you are getting  scope binding errors make sure you wrap the click event code on a setTimeout Function   VIEW   lt input id  upload      type  file      ng-file-select  onFileSelect  files       style  display  none   gt    lt button type  button      ng-click  clickUpload    gt Upload lt  button gt    CONTROLLER   scope clickUpload   function        setTimeout function            angular element   upload   trigger  click           0

User · Answer

best and simple way to use native java Script which is one liner code   document querySelector   id   click      Just add  id  to your html element like    lt button id  myId1  ng-click  someFunction    gt  lt  button gt   check condition in javascript code  if condition       document querySelector   myId1   click

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

Examples related to angularjs