input type="file" validation (bootstrap)

[solomon_13000]

I am trying to get the add button to enable if I select a valid file otherwise disable it. Also i'm trying to show messages if an invalid file is selected. The code below doesn't not seem to generate the desired result:

<form name="myForm">
<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title">Add Image</h4>
    </div>
    <div class="modal-body">
        <!-- <table class="table table-responsive table-hover table-condensed"> -->
        <div class='row'>
            <div class="form-group">
                <div class="col-sm-10">
                    <input type="file" class="form-control-file"  
                        ng-file-select="onFileSelect($files)" 
                        ngf-accept="'.jpg,.png'" 
                        ngf-pattern="'.jpg,.png'" 
                        ngf-max-size="'500KB'"  
                        name="img" id="img" ng-model="product.filename" required>
                    <div ng-messages="myForm.img.$error && myForm.img.$touched" ng-show="myForm.img.$dirty" style="color:red">
                        <div ng-message="maxSize"><p>Image is to large, it must be smaller than 10 Mb</p></div>
                        <!-- <div ng-message="minSize"><p>Image is to small, it must be bigger than 1 Mb</p></div> -->
                        <div ng-message="accept"><p>File must be an image: (png, tiff, jpeg)</p></div>
                        <p ng-message="required">Providing a filename is mandatory.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" ng-click="addImage()" data-dismiss="modal" ng-disabled="myForm.$invalid">Add</button>
        <button type="button" class="btn btn-secondary" ng-click="closeImage()" data-dismiss="modal">Close</button>
    </div>
</div>
</form>        

Your help is kindly appreciated.

Thank You.