Get all attachments from SharePoint List Item using AngularJS

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

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

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):/);
     }]);
 
 }());
 

clip_image001

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

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