0

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(); }); });
Improve this question

3 Answers 3

Reset to default
0

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

<md-button id="uploadButton" ng-click="yourfunction()">Choose file</md-button>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
0

Change this 

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

To this:

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

2 Comments

Getting the same error : input.click is not a function
Try this: document.getElementById('fileInput').click() instead of input.click()
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.

Improve this answer

Comments