Disable upload button when no file selected

Question

<input type="file" ng-file-select ng-model="file" accept=".xls" name="inputFile" id="inputFile" required/>
        <div ng-show="uploadForm.inputFile.$dirty && uploadForm.inputFile.$invalid" 
        ng-messages="uploadForm.inputFile.$error" ng-messages-include="fileUpload-messages"></div></div>
        <div class="modal-footer"><button ng-class="{'button-style': uploadForm.$valid}" ng-disabled="uploadForm.$valid || !file" ng-click="upload(file);">Upload</button></div>

This the piece of code i am trying with to disable upload button when no file is selected. It fails to work.

MattHampel · Accepted Answer · 2016-06-15 21:15:03Z

1

You should have the default for the button be disabled. Then create a listener for the selection. Then, once the listener is enabled and something is selected, you should change the button property to "Enabled".

answered Jun 15, 2016 at 21:15

MattHampel

296 bronze badges

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

1 Comment

Keeano Over a year ago

Ng-disabled is something I would look into...Matt is correct and that's how you should handle it but ng-disable is more appropriate in angular

Collectives™ on Stack Overflow

Disable upload button when no file selected

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related