0

I am using AngularJS.

I need to create a simple form to upload a file to the server. I want to disable my form submits button if the user has not selected any file from the input type file.

And enable the button if the user selects a file.

I am trying to use AngularJS form validation by making the input field required. But my button is not re-enabling for some reason.

I checked ng-model is also not updating its state. Anyone can please help me find the issue in my code?

code -

 <form name="uploadForm">
  <div class="row">
  <div class="col-12">
  <div class="form-group">
  <label class="control-label col-form-label">Select File <span style="color: red">*</span> 
  </label>
      <div class="input-group">
       <div class="input-group-prepend">
       <span class="input-group-text">Upload</span>
       </div>
      <div class="custom-file">
  <input type="file" name="fileinput" class="custom-file-input" id="inputGroupFile01" ng-model="file" required>
  <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
  </div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="control-label col-form-label">Click on Upload to upload the file</label>
<button class="btn btn-primary" ng-click="upload()" ng-disabled="uploadForm.$invalid">Upload</button>
 </div>
</div>
</div>
</form>
Rikk Mor
  • 65
  • 12

1 Answers1

0

According to this answer, it is not possible in that way. See the link for suggestions. Required attribute Not working with File input in Angular Js

Urska Krivc
  • 815
  • 1
  • 10
  • 17