Handle callback functions in Angular 1.5 component

Question

I am having problems with handling callback in my Angular application.

I am trying to load an image and read it to base64 - this works fine but I need to access it outside my filesSelect.onchange; function in order to parse it to my database.

I want to set get hold of e.currentTarget.result, which I want to save as my scope : this.imageVariable.

I have following component:

(function(){
angular
    .module('app')
    .component('addImage', {
        bindings: {
            fileread: '='
        },
        controller: function(getfirebase, $base64){
            //variables
            this.base64Image = [];
            this.imageVariable;
            var imageElement = [];

            // functions
            this.userInfo = getfirebase;
            this.update_settings = update_settings;
            // this.filesChanged = filesChanged;

            function update_settings(){
                this.userInfo.$save();
            };

            this.data = {}; //init variable
            this.click = function() { //default function, to be override if browser supports input type='file'
                this.data.alert = "Your browser doesn't support HTML5 input type='File'"
            }

            var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
            fileSelect.type = 'file';

            if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
                return;
            }

            this.click = function() { //activate function to begin input file on click
            fileSelect.click();
            }

            fileSelect.onchange = function() { //set callback to action after choosing file
            var f = fileSelect.files[0], r = new FileReader();
            console.log(f);
                r.onloadend = function(e) { //callback after files finish loading
                    e.currentTarget.result;
                }
                r.readAsDataURL(f); //once defined all callbacks, begin reading the file

            };

        },
        controllerAs: 'addImage',
        template: `
                <h3>Settings-pages</h3>
                <card-list class="agform">
                    <ul>
                        <li>
                            <p>Image preview</p>
                        </li>
                        <li>
                            <img ng-src="{{addImage.userInfo.image}}">
                        </li>
                        <li>
                            <input type="text" ng-model="addImage.userInfo.name" name="fname" placheholder="Name"><br>
                            <input type="text" ng-model="addImage.userInfo.email" name="fname" placheholder="Email"><br>
                        </li>
                    </ul>
                    {{addImage.userInfo}}
            </card-list>
            <card-footer>
                <button ng-click='addImage.click()'>click to select and get base64</button>
                {{addImage.imageVariable}}
                <button ng-click='addImage.update_settings()'></button>
            </card-footer>
            `
    })
})();

It's probably simple but I have spend hours trying to understand and solve this problem.

Answer 1

I can't say I know angularjs ... from a javascript perspective, it'd be as simple as saving this in another variable (me seems a popular choice), then using me.imageVariable = e.currentTarget.result;

controller: function(getfirebase, $base64){
    //variables         
    this.base64Image = [];
    this.imageVariable;
    var imageElement = [];
    // ************** added line
    var me = this;

    // ... code removed for clarity

    fileSelect.onchange = function() { //set callback to action after choosing file
        var f = fileSelect.files[0], r = new FileReader();
        console.log(f);
        r.onloadend = function(e) { //callback after files finish loading
            // ******* save to imageVariable here
            me.imageVariable = e.currentTarget.result;
        }
        r.readAsDataURL(f); //once defined all callbacks, begin reading the file
    };