FileReader onload only works the second time around in browsers

Issue

I'm working on in-browser image processing with HTML5 and have a weird issue in Chrome with the onload event handler for the File API FileReader class the file is only processed properly the second time it's selected in the form.

Any idea how I can get Chrome to process this event the first time around? In my console network when i click edit image don't appear nothing when i click the second time in edit button appear me the profilePic with the image blob. IDK what happen.

Code:

function uploadFile(){
    var file = $scope.profilePic;
    console.log(file);
    var blob = new Blob([file], {
        "type": "text/html"
    });

    var reader = new FileReader();

    reader.onload = function(e) {
        var text = e.target.result.split(',')[1];
        console.log(text);
        $scope.loadedUser.profilePic = text;
    }

    reader.readAsDataURL(blob);
}; 

html:

<div layout-gt-sm="row" style="margin-bottom: 20px;">                                                    
    <input type="file" name="profilePic" fileread="profilePic"> 
</div>

Solution

The quick fix is to use $scope.$apply:

reader.onload = function(e) {
    var text = e.target.result.split(',')[1];
    console.log(text);
    $scope.loadedUser.profilePic = text;
    //USE $apply
    $scope.$apply();
}

The reader.onload event is a browser event which occurs outside the AngularJS framework. Any changes to the AngularJS scope need to be processed with an AngularJS digest cycle which is started with $scope.$apply().

_{(source: angularjs.org)}

-- AngularJS Developer Guide (v1.1.5) - Concepts - Runtime

Answered By - georgeawg