angularjs input file onchange error in jhipster webapp

Question

AngularJS v1.5.8

<input type="file"   onchange="angular.element(this).scope().uploadImage()" />

$scope.uploadImage = function(){
            alert("change");
        }

error in console:

Uncaught TypeError: Cannot read property 'uploadImage' of undefined at HTMLInputElement.onchange

i got answer html controller angular.element(document.body).scope.uploadImage = function() { alert("change"); } thanks all — VenbillYu, Aug 16 '17 at 03:51

score 0 · Answer 1 · answered Aug 15 '17 at 05:53

I think you have setup angular wrong, it should work like this:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.uploadImage = function() {
    alert("change");
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <input type="file" onchange="angular.element(this).scope().uploadImage()" />

  </div>

thanks,i use jhipster to create App ,it is not worked in jhipster webapp — VenbillYu, Aug 15 '17 at 06:27

sabbir · Answer 2 · 2017-08-15T06:06:14.217

0

Try as like as given below :

HTML

  <input
       type="file"
       ng-model="file"
       name="file"                                
       onchange="angular.element(this).scope().uploadImage(this)"
                    />

AngularJS

  $scope.uploadImage = function(elements) {

      let file =  elements.files[0];   
  }

See : jsbin

edited Aug 15 '17 at 06:06

answered Aug 15 '17 at 05:58

sabbir

2,020
3
26
48

thanks,but it is not worked in jhipster – VenbillYu Aug 15 '17 at 06:26

angularjs input file onchange error in jhipster webapp

2 Answers2