Access Folders & Files From SharePoint Using Angular JS & REST API

Here we will explore pure Angular JS directives (without using jQuery or other frameworks) by accessing the SharePoint REST API. The example I have taken is accessing the folder and files from the library by the following two events:

• On page load, accessing all the folders from the library and storing them in a dropdown box.
• On button click event, populate the files in a table based on the selected folder from the dropdown.

So, we will make two requests to the server and render it in a page.

The following will apply a Folder collection to the Dropdown list.

HTML Snippet:

1. <select id="lib-folder" ng-model="libFolders" ng-options=" fldr as fldr.Title for fldr in Folders" >  
2.     <option value="">--Select Folder--</option>  
3. </select>  

ng-options: This directive is an alternative to the ng-repeat directive. This is used to dynamically generate the list of elements for the select element using the array “$scope.Folders” obtained as the result of the SharePoint REST API.

fldr.Title This is the retrieved folder name that is rendered as a value to the dynamically generated element to the dropdown.

Note: If you have not used “--Select Folder--” code, the empty option will be dynamically generated when populating the folders to the dropdown.

Script Snippet:

1. $http({  
2.     method: "GET",      url:_spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('DocumentLibrary')/items?$select=Id,Title ,FileDirRef,FileRef,FSObjType&$filter=FSObjType%20eq%201",  
3.     headers: {"Accept":"application/json;odata=verbose"}  
4. }  
5. ).success(function(data, status, headers, config){  
6.     $scope.Folders = data.d.results;  
7.     $scope.libFolders = $scope.Folder[0];  
8. }).error(function (data, status, headers, config){  
9. });  

_spPageContextInfo.webAbsoluteUrl :_spPageContextInfo is very useful when writing JavaScript code on the SP site. This has a webAbsoluteUrl property that returns the web URL that we use to generate the REST API request URL.

REST API URL: fetches the items with the values for the following fields filtered by folder from the “DocumentLibrary” library. 
_spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('DocumentLibrary')/items

View Fields:

1. $select=Id,Title ,FileDirRef,FileRef,FSObjType  

Filter:

1. $filter=FSObjType%20eq%201  

Returns the items, if the item type is 1 (folder).

1. $scope.Folders = data.d.results  

The successful response assigns the folder collection array to the scope variable $scope.Folders. 
The ng-options directive uses this array variable and dynamically generates the options.

1. $scope.libFolders = $scope.Folders[0]  

Assign the first item of Folder collection array to the default value for dropdown.

Populate files based on the selected Folder:
Now we are done with the rendering of the folder list to the dropdown. To invoke the event to request the files for the selected folder, we have a button and the function “btnGetFiles()” as in the following:


HTML Snippet:

1.   
2. <table width="100%" cellpadding="10" cellspacing="2" class="files-table">  
3.     <thead>  
4.     <tr>  
5.         <th>Title</th>  
6.         <th>Author</th>       
7.     </tr>  
8.     </thead>  
9.     <tbody>  
10.     <tr ng-repeat="file in Files">  
11.         <td><a href="{{file.ServerRelativeUrl}}">{{file.Name}}</a></td>  
12.         <td>{{file.Author.Title}}</td>        
13.     </tr>  
14.     </tbody>  
15. </table>  

Script Snippet:

1. $scope.btnGetFiles = function()  
2. {  
3.     var selectedFolder = $scope.libFolders.FileRef+"/";  
4.     var resturl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/getfolderbyserverrelativeurl('"+selectedFolder+"')/files?$select=Name,Author/Title&$expand=Author/Title";  
5.     $http(  
6.     {  
7.         method: "GET",  
8.         url:resturl,  
9.         headers: {"Accept":"application/json;odata=verbose"}  
10.     }  
11.     ).success(function(data, status, headers, config){    
12.         $scope.Files = data.d.results;                
13.     }).error(function (data, status, headers, config){  
14.     });  
15. }  

$scope.libFolders.FileRef : Returns the dropdown's selected value.

REST API URL
$expand: this option has the ability to retrieve the related properties. This is used to retrieve the author name using a single request instead of sending multiple requests.

$expand=Author/Title: file.Author.Title is to be added in HTML to retrieve the expanded value.

The successful result is stored in the scope variable “$scope.Files” and this is used in a table element to dynamically generate the rows because of the ng-repeat directive.

ng-show
If there is no files retrieved for the folder, use the ng-show directive with the condition to show the proper message as in the following:

There are no files available under this folder.

Here is the full code:

1. <style type="text/css">  
2. .files-table th{ background-color:#ddd; border:2px solid #fff; text-align:left}  
3. .files-table td{ background-color:#eee; border:2px solid #fff;}  
4. .web-heading{ padding:2px;}  
5. </style>  
6.   
7. <script type="text/javascript" src="/siteassets/angular.min.js"></script>  
8. <div ng-app="spng-App">  
9. <h2 class="web-heading">Folder and Files</h2>  
10. <div ng-controller="spng-WebCtrl">  
11. <select id="lib-folder" ng-model="libFolders" ng-options="fldr as fldr.Title for fldr in Folders" >  
12. <option value="">--Select Folder--</option>  
13. </select>  
14. <input type="button" value="Get Files" ng-click="btnGetFiles()"/>  
15.   
16. <table width="100%" cellpadding="10" cellspacing="2" class="files-table">  
17. <thead>  
18. <tr>  
19. <th>Title</th>  
20. <th>Author</th>   
21. </tr>  
22. </thead>  
23. <tbody>  
24. <tr ng-repeat="file in Files">  
25. <td><a href="{{file.ServerRelativeUrl}}">{{file.Name}}</a></td>  
26. <td>{{file.Author.Title}}</td>   
27. </tr>  
28. </tbody>  
29. </table>  
30. <p ng-show="!Files.length">There are no files available under this folder.</p>  
31. </div>  
32. </div>  

1. <script type="text/javascript">  
2. var spApp= angular.module('spng-App', []);  
3. spApp.controller('spng-WebCtrl', function($scope, $http){  
4.   
5. //Controller load event to append the choices with folder value to the dropdown  
6. $http({  
7. method: "GET",  
8. url:_spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('DocumentSetLibrary')/items?$select=Id,Title,FileLeafRef,FileDirRef,FileRef,FSObjType&$filter=FSObjType%20eq%201",  
9. headers: {"Accept":"application/json;odata=verbose"}  
10. }  
11. ).success(function(data, status, headers, config){  
12. //Store the folder collections to the Folders scope variable  
13. $scope.Folders = data.d.results;  
14. //Set the default value to the dropdown  
15. $scope.libFolders = $scope.DocumentSets[0];  
16. }).error(function (data, status, headers, config){  
17. });  
18.   
19. //Button click event to populate the files in table  
20. $scope.btnGetFiles = function(){  
21. //Get the selected folder from the select element  
22. var selectedFolder = $scope.libFolders.FileRef+"/";  
23. var resturl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/getfolderbyserverrelativeurl('"+selectedFolder+"')/files?$select=Name,Author/Title&$expand=Author/Title";  
24. $http({  
25. method: "GET",  
26. url:resturl,  
27. headers: {"Accept":"application/json;odata=verbose"}  
28. }  
29. ).success(function(data, status, headers, config){   
30. //Store the filecollection for the folder to the Files scope variable  
31. $scope.Files = data.d.results;   
32. }).error(function (data, status, headers, config){  
33. });  
34. }  
35. });  
36. </script>  

OUTPUT:



Still we have many options available in Angular JS and we will continue our exploration in this area. We will welcome the new technologies to ease the coding. Happy learning.