title: AngularJs Disable Submit Button Until A File Upload Path Selected
body: <p>I'm new to AngularJS and I can seem to find a solution to my problem.  I have a file upload field on my site and a submit button.  This page has a drop down list and a disabled submit button when the user first hits the page.  The submit button is only enable once a selection is made from the drop down list.  This works great but I have now been asked to add a file upload option to the list which I have done and my file upload <code>&lt;input type="file"&gt;</code> field is displayed when selected.</p>
  
  <p>The issue I have is that when the user selects the upload option it's enabling my button and I only want the submit button to be enabled once the file path has been selected.</p>
  
  <p>At the moment the enabling/disabling of the button is done in my view as shown below.</p>
  
  <pre><code>            &lt;div class="form-group"&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;select name="selectedbankaccountname" ng-options="choice for choice in bankaccountnames" ng-model="selectedbankaccountname" class="form-control" style="width:100% !important" focus-on="setfocus" required&gt;
                          &lt;option&gt;&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;!-- TODO - BUTTON NEEDS TO BE DISABLED IF BANK UPLOAD SELECTED &amp; FILE NOT SELECTED --&gt;
                  &lt;button type="submit" class="btn btn-success" ng-disabled="startautoreconciliation.selectedbankaccountname.$invalid || disablebutton" ng-click="startrec()" title="Click to start the auto reconciliation procedure."&gt;Start Auto Rec&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="form-group" ng-if="bankreconciliation.reconciliationtype == 'Bank file upload'"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;p&gt;Please ensure that you have copied the selected file to the designated folder prior to uploading the bank file.&lt;/p&gt;
                      &lt;input type="file" style="width: 100%; height: 35px; border: none !important; cursor: pointer" onchange="angular.element(this).scope().file_changed(this)" ng-model="bankfilepath" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone shed any light on how I can get this working.</p>