Get all attachments from SharePoint List Item using AngularJS

Hello everyone,

This is the continuation of my previous article ‘How to handle multiple file selection and validation on input file type using AngularJS’. In this article we will see how to retrieve multiple files from you SharePoint List Item and show those in custom Form which uses AngularJS.

 <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>
 

The following service which will be used to GetListData from SharePoint using angularjs $http service.

 (function () {
     'use strict';
     var serviceId = 'List_Context';
 
     var List_Context = function ($http, $q) {
 
         return {
             getListData: getListData
         };
 
 var requestHeader = {
             getHeader: {
                 'headers': {
                     'accept': 'application/json;odata=verbose'
                 }
             }
         };
 
         function getListData(urlValue) {
             var deferred = $q.defer();
             $http.get(urlValue, requestHeader.getHeader)
                         .then(function (response) {
                             deferred.resolve(response.data.d);
                         }, function (error) {
                             deferred.reject(error);
                         });
             return deferred.promise;
         };
 
     var module = angular.module("app");
     module.factory(serviceId, ['$http', '$q', List_Context])
 }());
 

In the controller, we need to call getListData function by passing the right URL to get SharePoint list data.

 (function () {
     'use strict';
 
     var controllerId = 'mycontroller';
     var app = angular.module("app", []);
 
     var mycontroller = function ($scope, $q, List_Context) {
 
 	//Here I am getting the Item ID from query string
 var geturlVal = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('List%20Name')" + "/getitembyid(" + GetUrlKeyValue('ID', false) + ")?$expand=AttachmentFiles";
 
 	        //Getting List Item Values
         List_Context.getListData(geturlVal)
                .then(onSuccessPDList, onError);
 
 var onSuccessPDList = function (data) {
      //Attachment Files should be mapped to attachedFile Scope variable
             $scope.attachedFile = $scope.itemVals.AttachmentFiles.results;
         };
 
         var onError = function (reason) {
             console.log('Something went wrong.');
         };
 
         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 this article we have seen how to retrieve all the attachments from SharePoint list item and show that in custom form using Angular. In my upcoming articles we will see how to upload and remove attachments in SharePoint list using Angular.

Happy Coding

Ahamed