How to handle multiple file selection and validation on input file type using AngularJS

Hello everyone,

In this article we will see how to upload multiple files into your form using angularjs form.

 <div ng-app="app"> 	<div ng-controller="mycontroller"> .... ... <td>Attach Memo:</td> <td>         <span>          <input type="file" ng-file-model="files" />          <p ng-show="invalidFileName">Contains invalid character.</p>          <p ng-show="fileAlreadyExists">The file already exists.</p>          <p ng-repeat="file in attachedFile">            <a target="_blank" href="{{file.ServerRelativeUrl}}" ng-href="{{file.ServerRelativeUrl}}">{{file.FileName}}     </a>&nbsp;            <a title='Click to Remove' ng-click="removeFile(attachedFile, $index)">               <img class="deleteIcon" src='../../../../SiteAssets/img/Delete_icon.png' />            </a>          </p>         </span>        </td> </div> </div> 

Here we have separate service for File upload and do the validation.

 'use strict'  angular.module('app').directive('ngFileModel', ['$parse', function ($parse, $sce) {     return {         restrict: 'A',         link: function (scope, element, attrs) {             var model = $parse(attrs.ngFileModel);             //var isMultiple = attrs.multiple;             var modelSetter = model.assign;             var value = '';             element.bind('change', function () {                 angular.forEach(element[0].files, function (item) {                     //To check FileName contains special character                     if (!(/[#%\&*{}[\]<>?/|:~]/.test(item.name))) {                         //To check FileName already exists                         if (!(scope.attachedFile.filter(function (e) { return e.FileName == item.name; }).length > 0)) {                             var reader = new FileReader();                             reader.filename = item.name;                             var values = {                                 FileName: item.name,                                 ServerRelativeUrl: URL.createObjectURL(item), //$sce.trustAsResourceUrl(URL.createObjectURL(item)),                                  _file: item,                                 newlyAdded: true                             };                             scope.fileAlreadyExists = false;                             scope.invalidFileName = false;                             scope.attachedFile.push(values);                         }                         else                             scope.fileAlreadyExists = true;                     }                     else {                         scope.invalidFileName = true;                     }                 });                 scope.$apply(function () {                     modelSetter(scope, '');                 });             });         }     }; }]);  

In the controller,

 (function () {     'use strict';      var controllerId = 'mycontroller';     var app = angular.module("app", []);      var mycontroller = function ($scope, $q) {         var removeFiles = [];         //Attachment Remove Button         $scope.removeFile = function (array, index) {             removeFiles.push(array[index].ServerRelativeUrl);             array.splice(index, 1);         };		     }     app.controller(controllerId, mycontroller);     app.config(['$compileProvider', function ($compileProvider) {         $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|blob):/);     }]);  }());   

Image may be NSFW.
Clik here to view.

In the upcoming articles we will see how to upload and remove attachments in SharePoint list using AngularJS.

Happy Coding

Ahamed