2377

Add simple validate to form file upload in AngularJS

Question:

I have an AngularJS form whose contents are sent to a nodemailer backend. This works just fine, using the following directive to add a file upload component to the form:

.directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function(){ scope.$apply(function(){ modelSetter(scope, element[0].files[0]); }); }); } }; }])

However, I need to add validation to this so that the Submit button is disabled until a file has been chosen. I'm presuming the form would look something like this:

<div class='form-group'> <!-- FILE UPLOAD --> <input type="file" file-model="email.attachment" name="attachment" class="form-control" accept="application/pdf, application/msword, text/plain" /> <!-- SUBMIT BUTTON --> <button type='submit' name='submit' class='btn btn-primary' ng-disabled = 'userForm.$invalid' value = 'Send' ng-click = 'uploadFile()'>Submit</button> </div>

I understand that the standard 'required' does not work with the file model, and I can find no examples of the correct procedure. How should I modify the directive to implement validation?

Answer1:

Use $rootScope for that :

In your main controller :

$rootScope.fileUploaded = false;

.directive('fileModel', ['$parse','$rootScope', function ($parse,$rootScope) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function(){ scope.$apply(function(){ modelSetter(scope, element[0].files[0]); if(element[0].files[0]){ $rootScope.fileUploaded = true; } }); }); } }; }])

In your view :

<div class='form-group'> <!-- FILE UPLOAD --> <input type="file" file-model="email.attachment" name="attachment" class="form-control" accept="application/pdf, application/msword, text/plain" /> <!-- SUBMIT BUTTON --> <button type='submit' name='submit' class='btn btn-primary' ng-disabled = '!fileUploaded' value = 'Send' ng-click = 'uploadFile()'>Submit</button> </div>

Recommend

  • AngularJS : transclude ng-repeat inside directive
  • How do I properly code a javascript property and method using the 'prototype' function?
  • How to apply async task into this
  • How to get a android ListView item selector to use state_pressed
  • Crafting a LINQ based solution to determine if a set of predicates are satisfied for a pair of colle
  • Adding a new element into the DOM with angularjs does not initiate it
  • Get UILabel out of UIButton
  • Using an STL Iterator without initialising it
  • My first C# WPF ValidationRule is not firing
  • Mocha throws unexpected token error for ES6 object spread operator
  • Criterion causing memory consumption to explode, no CAFs in sight
  • jquery validation - waiting for remote check to complete
  • Knockout custom binding handler
  • Login not working in Firefox in Meteor
  • Reduction and collapse clauses in OMP have some confusing points
  • Assign variable to the value in HTML
  • Transactional Create with Validation in ServiceStack Redis Client
  • MongoDb aggregation
  • How to use remove-erase idiom for removing empty vectors in a vector?
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Redux, normalised entities and lodash merge
  • Calling of Constructors in a Java
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How do I rollback to a specific git commit
  • Is there a mandatory requirement to switch app.yaml?
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • How to delete a row from a dynamic generate table using jquery?
  • WPF Applying a trigger on binding failure
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • using HTMLImports.whenReady not working in chrome
  • How to get Windows thread pool to call class member function?
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • Is there any way to bind data to data.frame by some index?
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?