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

Ahamed Fazil Buhari
Senior Developer
October 10, 2017
Rate this article
[Total: 0    Average: 0/5]

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>
          <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 title='Click to Remove' ng-click="removeFile(attachedFile, $index)">
               <img class="deleteIcon" src='../../../../SiteAssets/img/Delete_icon.png' />

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( {
                         //To check FileName already exists
                         if (!(scope.attachedFile.filter(function (e) { return e.FileName ==; }).length > 0)) {
                             var reader = new FileReader();
                             reader.filename =;
                             var values = {
                                 ServerRelativeUrl: URL.createObjectURL(item), //$sce.trustAsResourceUrl(URL.createObjectURL(item)), 
                                 _file: item,
                                 newlyAdded: true
                             scope.fileAlreadyExists = false;
                             scope.invalidFileName = false;
                             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) {
             array.splice(index, 1);
     app.controller(controllerId, mycontroller);
     app.config(['$compileProvider', function ($compileProvider) {


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

Happy Coding


Author Info

Ahamed Fazil Buhari
Senior Developer
Rate this article
[Total: 0    Average: 0/5]
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint 2013, 2016 and O365, Azure, ASP.NET, SQL Server, IIS and client more

Leave a comment