Angularjs upload file and file reader to resize image?

i am using angularjs file upload angularjs-file-upload to upload file to server side. in the following process, i am checking the image size width and height and html5 file reader and canvas to create different size from the same file. but, i have some problem with onloadend event.

$scope.onFileSelect = function ($files) {
    file = $files[0];
    $scope.loading = true;
    //$files: an array of files selected, each file has name, size, and type.

    img = new Image();
    img.onload = function () {
        var self = this;
        if (self.width > sizes.width && self.height > sizes.height) {
            var i, len = Images.channel.length;
            for (i = 0; i < len; i++) {
                var size = Images.channel[i];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    var tempImg = new Image();
                    tempImg.src = reader.result;
                    tempImg.onload = function () {
                        var canvas = document.createElement('canvas');
                        canvas.width = size.width;
                        canvas.height = size.height;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(this, 0, 0, size.width, size.height);
                        var dataURL = canvas.toDataURL("image/jpeg");
                        //extract data from urlString
                        var n = dataURL.indexOf(",");
                        var data = dataURL.toString().substring(n); //we skip the ',' symbol used by navigator to detect canvas text
                        var imageFile = new Blob([data], { type: "plain/text"});
                        $scope.$apply(function () {
                            $uploadWrapper(pinholeAdminServerRoutes.image.upload,
                                imageFile,
                                {   "operationType": size.operationType,
                                    "objectId": $scope.channel.id,
                                    "size": size.label
                                }, function (response) {
                                    $scope.loading = false;
                                }, function (error) {
                                    $scope.loading = false;
                                });
                        });
                    };
                };
            }
        } else {
            $scope.$apply(function () {
                $scope.imageSizeNotValid = true;
                $scope.loading = false;
            });
        }
    };
    img.src = _URL.createObjectURL(file);
};

the final result is that the following code will just upload the final image.