ng-disabled button until input file is changed

Question

I have a form and it includes an input file for uploading photos. What I want is to disable the button until input file has no value. I also have other validations that make the button disabled.

My html file is like this

<form name="form" novalidate ng-submit="submitForm();">
    <input class="btn btn-primary" type="file" accept="image/*" name="File" id="File"  style=" margin-left:5px; width: 100%;">
    <div class="form-group">
        <label class="text-left control-label">Categories: </label>
        <select class="col-xs-5 pull-right" ng-model="cat" name="cat" ng-required="true" required>
            <option value="">---Please select---</option>
            <option ng-repeat="item in Cat" value="{{item.categories_id}}">{{item.categories_name}}</option>
        </select>
    </div>
    <br/>
    <div class="form-group">
        <label class="text-left control-label">Types: </label>
        <select class="col-xs-5 pull-right" ng-model="type" name="type">
            <option value="">---Please select---</option>
            <option ng-repeat="item in Types" value="{{item.type_id}}">{{item.type_name}}</option>
        </select>
    </div>
    <br/>
    <div class="form-group">
        <label class="text-leftcontrol-label">Gender: </label>
        <select class="col-xs-5 pull-right" name="category" id="category" ng-model="gender">
            <option value="">---Please select---</option>
            <option value="0">Female</option>
            <option value="1">Male</option>
            <option value="2">Both</option>
        </select>
    </div>
    <br/>
    <div class="form-group">
        <label class="text-left control-label">*Texture: </label>
        <select class="col-xs-5 pull-right" ng-model="texture" name="texture" ng-required="true" required>
            <option value="">---Please select---</option>
            <option ng-repeat="item in Texture" value="{{item.textures_id}}">{{item.textures_name}}</option>
        </select>
    </div>
    <br/>
</div>
<div class="col-xs-5">
    <div class="form-group">
        <label class="col-md-5 control-label">*Name: </label>
        <div class="col-md-7">
            <input type="text" class="pull-right input-group inline form-control" ng-model="name" name="name" id="Name" ng-required="true" required>
        </div>
    </div>
    <br/><br/><br/>

</form>

and my button is like this

<button name="submit" type="submit" id="submitsave" class="btn btn-primary" ng-disabled="form.texture.$invalid || form.cat.$invalid || form.type.$invalid " type="button" type="button" style="margin-right:1%; width:10%; height:10%">Finish</button>

http://stackoverflow.com/questions/29385861/angularjs-disable-submit-button-until-a-file-upload-path-selected — madhu, Feb 24 '17 at 06:41
Possible duplicate of [AngularJs Disable Submit Button Until A File Upload Path Selected](http://stackoverflow.com/questions/29385861/angularjs-disable-submit-button-until-a-file-upload-path-selected) — Gangadhar Jannu, Feb 24 '17 at 06:47
Possible duplicate of [Disable upload button when no file selected](https://stackoverflow.com/questions/37845503/disable-upload-button-when-no-file-selected) — vrintle, Jun 03 '19 at 17:57

score 0 · Answer 1 · edited Jun 03 '19 at 17:52

It is very easy way to do. Check this out.

angular.module('app', []).controller('mainCtr', function($scope) {

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app" ng-controller="mainCtr">
  <form name="mainform">
    <input type="text" ng-model="name" required />
    <input type="submit" value="Save" ng-disabled="mainform.$invalid" />
  </form>
</body>

ng-disabled button until input file is changed

1 Answers1