Unable to get $scope variables inside the fileReader.onload function - angularjs

Question

I am using something like this in angular
app.controller('techiesClub', function($scope, $http) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.asdf = "ankur";
$scope.uploadImage = function () {
alert($scope.asdf); ////////////WORKS WELL
var filesSelected = document.getElementById("upload").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent, ss) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
$scope.asdf = srcData; //////////////////NOT WORKING
}
debugger;
fileReader.readAsDataURL(fileToLoad, $scope);
}
}
});
Using uploadImage method on onchange of a input like this
<input type="file" id="upload" name="pic" class="form-control" onchange="angular.element(this).scope().uploadImage()">
I am unable to get the srcData i.e. the base64 data into a variable that i can use else where.

Answer 1

Ankur,
We can rewrite html in this way.
<input type="file" id="upload" name="pic" class="form-control" onchange="angular.element(this).scope().uploadImage(this);">
JS snippet here.. i'm trying with Blob version.
$scope.uploadImage = function ($event) {
alert($scope.asdf); ////////////WORKS WELL
var filesSelected = $event.files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var _ULR = window.URL || window.webkitURL;
var img = new Image();
img.onload = function() {
var srcData = this.src; // <--- data: blob
$scope.asdf = srcData; //////////////////NOT WORKING
};debugger;
img.src =_ULR.createObjectURL(fileToLoad);
}
}

Answer 2

I think you are missing the key point in your solution. I just change the way you are accessing the base64 contents. It should work.
$scope.uploadImage = function () {
alert($scope.asdf); ////////////WORKS WELL
var filesSelected = document.getElementById("upload").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileReader.result; // <--- data: base64
$scope.asdf = srcData; //////////////////NOT WORKING
}
debugger;
fileReader.readAsDataURL(fileToLoad);
}
}