Enable Submit Button after A File Upload Path is Selected AngularJs

Question

I am new to angular js and I want to disable upload button until the file is selected. According to the below code, the button is disabled but it is not getting enabled after the file is selected.

Please help me.

This is my html code:

<input type="file" id="upload" name="file" class="uploadFile" required="required" ng-model="fileToUpload">

<input type="submit" id ="submitFile" value="PostUsingAjax" onClick="uploadFile()"
                        ng-disabled = "form.$invalid || disabled" ng-click ="disableButton()">

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app>
  <div>
    <form name="myForm">
      <input type="file" id="upload" name="file" class="uploadFile" required ng-model="fileToUpload">
      <input type="submit" id="submitFile" value="PostUsingAjax" ng-disabled="myForm.$invalid" ng-click="doFile(fileToUpload)">
    </form>
  </div>
</div>

I've added a little bit of the necessary wrapping. Here's a few things to take away:

1: Name the form so that you can refer to it in the following case ng-disabled="myForm.$invalid". The form was named myForm.

2: The required attribute on the input for the file does not need a value. Simply being present is enough.

3: I added a custom angularjs ng-click. It is possible to use the default onClick as you have, but may be bad to mix and match listeners.

4: Required doesn't work on file fields. You will need to add a directive. There are several other stack overflow answers regarding this.

• Validation doesnt work for File Input with 'Required' attribute- AngularJS
• Required attribute Not working with File input in Angular Js
• How to validate form with input[type=file] in angularjs

Try any of the above answers.