Checking image resolution before uploading to remote server

I have a function to upload image to remote server. Upload function working fine, but once I add that upload function code block inside size validation block, it is not working. here is the html

  <p>
<input type="file" id="BtnBrowseHidden" name="files" style="display: none;" onchange="angular.element(this).scope().SelectFile(event)" />                                         
                                     <label class="btn bluebg " for="BtnBrowseHidden" id="LblBrowse" style="cursor:pointer;">
                                                  Update Image
             
                                     </label>                       
                    </p>

here is the validation code

$scope.SelectFile = function (e) {       
        var ext = e.target.files[0].name.split('.').pop();
        var popupImage = angular.element(document.querySelector('#popup__UpdateImpage'));
        popupImage.removeClass('hide');
        popupImage.addClass('hide');
        if (ext == 'png' || ext == 'gif' || ext == 'jpg' || ext == 'jpeg') {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.src = e.target.result;
                img.onload = function () {
                    if (img.height > 150 && img.width > 150) {
                        $scope.PreviewImage = e.target.result;
                        var payload = new FormData();
                        payload.append("file", e.target.files[0]);
                        var res = mainServices.uploadUserImage(payload);
                    }
                    else {
                        alert("File size doesn't support");
                    }
                }
            };
            reader.readAsDataURL(e.target.files[0]);
           
            //var payload = new FormData();
            //payload.append("file", e.target.files[0]);
            //var res = mainServices.uploadUserImage(payload);
            //res.then(function (response) {
            //    //alert("uploaded");
            //    var s = "uploaded";
            //});
        }

If I add that code block outside the validation block, it works fine. but how can I restrict uploading only if the size is above that size? There is no other button for validation, I actually needs this to be done once they select the file, it should validate and change the image and update the remote server. Is there any way I can achieve this ? All codes I have found is always validating then on another button click it updates to the server.

from Checking image resolution before uploading to remote server