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


Ahamed Fazil Buhari
SharePoint Developer
Published On :   10 Oct 2017
Visit Count
Today :  9    Total :   203
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

SharePoint Office 365 Tool
Simple & Powerful Tool for Migration, Security & Reporting. Free Trial


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

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

SharePoint Analytics