Function is not defined ReferecenError onchange in Angularjs

Question

I'm having issues with onchange event for file input. Here is my code:

Html:

 <input type="file" kendo-upload k-options="uploadOptions" id="fileInput" onchange="fileUploaded(event)"/>

Angularjs code - using Typescript.

$scope.fileUploaded = (event) => {
            console.log("Testing file upload");
            var reader = new FileReader();
            var target = event.target || event.srcElement;
            reader.onload = function(e) {
                $scope.$apply(function() {
                    $scope.readFile = reader.result;
                });
            };
            var file = target.files[0];
            reader.readAsText(file);
        };

I tried to follow this and change accordingly but am still having issues. Pass angularJS $index into onchange

I changed like this.

<input type="file" kendo-upload k-options="uploadOptions" id="fileInput" onchange="angular.element(this).scope().fileUploaded(this)">

I got this error. Uncaught TypeError: undefined is not a function. onchange

When I am trying to use ng-change, I have this error.

<div kendo-window="importFile" k-visible="false" k-modal="true" k-title="'Import File'"
         k-min-width="450" k-max-width="450"
         k-min-height="418" k-max-height="418">
        <form kendo-validator="validator" ng-submit="validate($event)">
                <li style="padding-bottom: 5px;">
                    <input type="file" kendo-upload k-options="uploadOptions" id="fileInput" ng-change="fileUploaded($event)"/>
                </li>
        </form>
    </div>

This gives error when accessing this $scope.importFile.center(); "TypeError: Cannot read property 'center' of undefined" Again, works fine if I use ng-click.

Any help on this is higly appreciated.

Thanks!

you have to use `ng-change()` angular function rather than `onChange()` plain javascript function. — gaurav bhavsar, Mar 05 '16 at 16:34
Change the input's attribute to `ng-change="fileUploaded($event)"`. — Jim Cote, Mar 05 '16 at 16:34
Thanks Jim and Gaurav! However, I still receive another error when trying to use ng-change. I have updated my post. — Sailoosha, Mar 05 '16 at 16:55
What's that `$scope.importReport` thing? Do you have it somewhere in your code? — Ammar Hasan, Mar 05 '16 at 17:05
Hi Ammar, my mistake, its $scope.importFile.center(). I changed it. Its a Kendo-window. — Sailoosha, Mar 05 '16 at 17:32

score 3 · Answer 1 · answered Mar 05 '16 at 17:16

3

You cannot use ngChange in this case since ngChange always requires ngModel and ngModel doesn't work with input type file. Also, you cannot access a function binded to $scope directly using onchange. Instead use the following:

onchange="angular.element(this).scope().fileUploaded($event)"

answered Mar 05 '16 at 17:16

Tarun Dugar

8,921
8
42
79

Thanks Tarun, I have this error when trying to user the way you suggested. ReferenceError: $event is not defined onchange – Sailoosha Mar 05 '16 at 17:34
Replace $event with 'this' – Tarun Dugar Mar 05 '16 at 18:51
Hi Tarun, thanks for the suggestion but i tried that way earlier. It's in my code above. I got this error. Uncaught TypeError: undefined is not a function. onchange – Sailoosha Mar 05 '16 at 19:59
Is there any way to work arround since in the code I am working in they set something like this : var _this = this; and instead of doing $scope.functionName, they do _this.functioName. So when I use this method, it return an error. Any clues? – Patrice Poliquin Mar 30 '17 at 17:07

Function is not defined ReferecenError onchange in Angularjs

1 Answers1

Linked