Button click is not a function error in angular controller

Question

I am trying to build a file upload component and I am getting the error :button.click is not a function. Why is that?

<form name="uploadForm">
        <div layout-gt-sm="row">
            <input id="fileInput" type="file" class="ng-hide">
            <md-input-container>
                <input id="textInput" type="text" >
            </md-input-container>
            <md-button id="uploadButton">Choose file</md-button>
            <md-button id="saveButton"  ng-click="$ctrl.uploadVideoFile($event)" >Upload</md-button>
        </div>
    </form>

    viewUploadModule.controller('viewUploadController', function ($location) {
        var self = this;

        self.$onInit = function (scope,element,location) {

            var input = angular.element(document.querySelector('#fileInput')); 
            var button =  angular.element(document.querySelector('#uploadButton'));
            var textInput =  angular.element(document.querySelector('#textInput'));
        }

         button.click(function (e) {
                    input.click();
                });

    });

score 0 · Answer 1 · answered Feb 16 '17 at 13:46

0

You cannot use button.click, instead call the function in ng-click

<md-button id="uploadButton" ng-click="yourfunction()">Choose file</md-button>

answered Feb 16 '17 at 13:46

Sajeetharan

216,225
63
350
396

Thank you, but I was using it before without ng-click and it was working fine. I need to trigger a click event from the controller. – Feb 16 '17 at 13:53

score 0 · Answer 2 · answered Feb 16 '17 at 13:48

0

Change this

button.click(function (e) {
                    input.click();
                });

To this:

self.uploadVideoFile= function (e) {
                        input.click();
                    }

answered Feb 16 '17 at 13:48

korteee

2,640
2
18
24

Getting the same error : input.click is not a function – Feb 16 '17 at 14:00
Try this: `document.getElementById('fileInput').click()` instead of `input.click()` – korteee Feb 16 '17 at 14:18

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

You don't need to wrap Dom element with angular.element.You must only use Dom element.

document.getElementById('fileInput').click()

executable code

This answer is helpful too.

edited May 23 '17 at 12:17

Community

1
1

answered Feb 16 '17 at 14:24

Mohammad Reza Rahimi

642
1
8
17

Button click is not a function error in angular controller

3 Answers3