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()">

Possible duplicate of Disable upload button when no file selected — vrintle
– vrintle, Commented Jun 3, 2019 at 17:56

vrintle · Accepted Answer · 2020-04-16 18:14:56Z

0

<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.

Try any of the above answers.

edited Apr 16, 2020 at 18:14

vrintle

5,6263 gold badges19 silver badges47 bronze badges

answered May 4, 2016 at 0:15

Dan Sabin

8861 gold badge9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user123 Over a year ago

Thanks. I will try that.

vrintle Over a year ago

It will definitely not work because angular-js currently don't support input[type='file']. Looking forward to a genuine answer.

Collectives™ on Stack Overflow

Enable Submit Button after A File Upload Path is Selected AngularJs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related