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]
 
Views
6196

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

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

Happy Coding

Ahamed

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

Leave a comment