Callback input function return "undefined" element


#1

Hi everybody! I’ve some trouble with upload image using tag. There is my html:

<label for="picture" data-tap-disabled="true" class="button button-block button-stable">Carica</label>
<input type="file" accept="image/*" class="ng-hide" id="picture" onchange="angular.element(this).scope().uploadImg()" file-model="portraitFile">

While my javascript is:

$scope.uploadImg = function() {
    var files = $scope.portraitFile;
    console.log("result: " + JSON.stringify(files));
};

I choose some file, and the result of console.log is:

result: undefined

i try to implement ng-file-upload plugin for angular, but i’ve the same results.
May Ionic interfere with tha callback function? I try my code on browser launching

$ ionic serve

i hope someone could help me :blush: thanks!

EDIT:

i try to make this changes:
HTML

<label for="picture" data-tap-disabled="true" class="button button-block button-stable">Carica</label>
      <input type="file" accept="image/*" class="ng-hide" id="picture" onchange="angular.element(this).scope().uploadImg(this)">

Javascript

$scope.uploadImg = function(element) {

    $scope.$apply(function(scope) {
        console.log("element: " + JSON.stringify(element));
        var photofile = element.files[0];
        console.log("photofile: " + JSON.stringify(photofile));
        var reader = new FileReader();
        reader.onload = function(e) {
        
        };
        reader.readAsDataURL(photofile);
    });
};

The result are:
element: {} photofile: {}

Not sure it’s a step forward or backward :frowning:


#2

Nobody have same problem? :confused:


#3
  1. you can call $scope-functions directly without selecting the dom-element.
  2. there is no standard file-model attribute…

if you want to upload a file you have to listen on the change event:

you should handle this in an own directive like it is described in the first answer in stack overflow.


#4

Thank you so much :smile: i try and i tell you if work! Thanks!!!


#5

It work! Thanks a lot @bengtler!!! :smiley: