Get all attachments from SharePoint List Item using AngularJS


Ahamed Fazil Buhari
SharePoint Developer
Published On :   11 Oct 2017
Visit Count
Today :  14    Total :   539
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,

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

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

KWizCom Scan