Image validation controller angular keeps giving image to large

Question

I have validation in my angular controller to validate a image is a set size and is 1080x1920.

however evry image i try and upload I get error message

Error Uploading the image, make sure the resolution is 1080x1920px

even when I upload a image of the correct size. I am woundering if someone can spot a error in my code of why that may be ?

HTML

<div ng-controller="UpLoadImage">

<div ng-repeat="step in stepsModel">
    <img class="thumb" ng-src="{{step}}"/>
</div>

<label for="file">Select File</label>
<input ng-model="file" type='file' name='file' id='fileinput' base-sixty-four-input required onload='onLoad' maxsize='600'
       accept='image/*' onchange='angular.element(this).scope().imageUpload(this)'/>

{{uploadError}}

<button>Add to array</button>

JavaScript

   .controller('UpLoadImage', function ($scope, $http, $timeout) {

    $scope.imageUpload = function(){
        //
        // $scope.uploadBtn = false;
        $scope.errorActive = false;
        $scope.success = false;
        $scope.newImage = false;

        var reader = new FileReader();
        var input, file;
        if (!window.FileReader) {
            alert("The file API isn't supported on this browser yet.");
            return;
        }
        input = document.getElementById('fileinput');
        if (!input) {
            $scope.errorActive = true;
            $scope.uploadError = "Um, couldn't find the file input element.";
            $scope.$apply();
        }
        else if (!input.files) {
            $scope.errorActive = true;
            $scope.uploadError = "This browser doesn't seem to support the `files` property of file inputs.";
            $scope.$apply();
        }
        else if (!input.files[0]) {
            $scope.errorActive = true;
            $scope.uploadError = "Please select a file before clicking 'Upload'";
            $scope.$apply();
        }
        else {
            file = input.files[0];
            size = file.size;
            if(size < 650000){
                var fr = new FileReader;
                fr.onload = function(e){
                    var img = new Image;

                    img.onload = function(){
                        var width = img.width;
                        var height = img.height;
                        if(width == 1080 && height == 1920){
                            $scope.uploadError = '';
                            $scope.errorActive = false;
                            $scope.playingNow.background = e.target.result;
                            $scope.newImage = true;
                            $scope.uploadError = 'image uploaded';
                            $scope.$apply();
                            reader.onload = $scope.imageIsLoaded;
                            reader.readAsDataURL(element.files[0]);
                        }else{
                            $scope.errorActive = true;
                            $scope.uploadError = 'Error Uploading the image, make sure the resolution is 1080x1920px';
                            $scope.$apply();
                        }
                    };
                    img.src = fr.result;
                };
                fr.readAsDataURL(file);
            }else{
                $scope.errorActive = true;
                $scope.uploadError = 'max file size supported is 650Kb please compress your image';

            }
        }
        $scope.$apply();
    };

    $scope.imageIsLoaded = function (e) {
        $scope.$apply(function () {
            $scope.stepsModel.push(e.target.result);
        });

        $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {

        };
    };

    $scope.stepsModel = [];
})

Answer 1

if(width == "1080" && height == "1920"){

This should fix it.

Answer 2

As you are getting width = 1920 and height = 1080 so change your if condition :

if(height=== 1080 && width=== 1920){
       // your code
}