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>
<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):/);
}]);
}());
In the upcoming articles we will see how to upload and remove attachments in SharePoint list using AngularJS.
Happy Coding
Ahamed
Leave a comment