get the file from ng-change

Question

How to convert this to angular.js compitable so that i get the dataurl and send through $http.post

<input type="file" id="imgfiles" name="imgfiles" accept="image/jpeg" onchange="readURL(this);">


function readURL(input) {
    if (input.files[0].size <= 1048576) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#cam_photo').attr('src', e.target.result).width(250).height(230);
                var a = $('#cam_photo').attr('src');
                data_url = a;
            };
            reader.readAsDataURL(input.files[0]);
        }
    } else {
        alert('File is too large. Upload file less than 1MB');
    }
}

Answer 1

Use angular.element(this).scope() to get the scope

Try this:

onchange="angular.element(this).scope().readURL(this)"

And then, write your $scope.readURL(input) code in your controller

$scope.readURL = function(input) {
    if (input.files[0].size <= 1048576) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#cam_photo').attr('src', e.target.result).width(250).height(230);
                var a = $('#cam_photo').attr('src');
                data_url = a;
            };
            reader.readAsDataURL(input.files[0]);
        }
    } else {
        alert('File is too large. Upload file less than 1MB');
    }
}