I had an opportunity to work on an assignment related to upload of documents from Asp.Net MVC application into a SharePoint site with Angular Js. Follow the the simple steps provided below to upload documents into SharePoint 2013 document library with Angular Js
Create a ASP.NET MVC Application and install jquery and Angular JS from Nuget.
Modify the Index.Cshtml(under View->Home) with the following code
Create a Script.js File and copy and paste the below code:
Create a ASP.NET MVC Application and install jquery and Angular JS from Nuget.
Modify the Index.Cshtml(under View->Home) with the following code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <table style="width:100%;"> <tr> <td> <label for="lblinput">Input the search string</label> </td> <td> <input id="Text1″ type="text" ng-model="Search" value="Category" /> </td> </tr> <tr> <td> <input id="Submit1″ type="submit" value="submit" ng-click="GetDetails()" /> </td> </tr> </table> <table style="width:100%;"> <tr> <td> <label for="lblinput">Add value to Sharepoint</label> </td> <td> <input id="Text1″ type="text" ng-model="NewItem" value="Category" /> </td> </tr> <tr> <td> <input id="Submit1″ type="submit" value="submit" ng-click="Add()" /> </td> </tr> </table> <table> <tr> Select File to Upload : <input id="inputFile" type="file" /> <input type="button" ng-click="Upload();" value="Upload" /> </tr> </table> <h1>{{title}}</h1> {{station_list}} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| var app = angular.module("myApp", []); //This is to get the data from sharepoint app.controller("myController", function($scope, $http, $q) { $scope.GetDetails = function() { $http({ withCredentials: true, method: 'GET', headers: {"Accept": "application/json;odata = verbose" }, url: "http://[SharePoint Site]/_api/lists/getbytitle('" + $scope.Search + "')/items" }) .then(function(response) { var station_list = []; $.each(response.data.d.results, function(key, value) { station_list.push(value.Title); }); $scope.station_list = station_list; $scope.title = "Data From Sharepoint"; }); }; //To get the formdigestvalue, which is required to insert data to sharepoint //Define the service call function getFormDigest() { //Fetch the Url // JSRequest.EnsureSetup(); // var appweburl = decodeURIComponent(JSRequest.QueryString['SPAppWebUrl']); var dfd = $q.defer(); //Http post to the context info rest service $http.post("http://[SharePoint Site]/_api/contextinfo”, { data: ", headers: {"Accept": "application/json;odata = verbose", "Content-Type": "text/xml" }, }).success(function(data) { //Resolve the FormDigestValue from the success callback. dfd.resolve(data.d.GetContextWebInformation.FormDigestValue); // alert(data.d.GetContextWebInformation.FormDigestValue); }).error(function() { dfd.reject("error finding form digest"); }); return dfd.promise; } //Inserting data to sharepointt $scope.Add = function() { alert($scope.NewItem); $http.defaults.headers.common.Accept = "application/json;odata = verbose"; $http.defaults.headers.post['Content-Type'] = 'application/json;odata = verbose'; $http.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'; $http.defaults.headers.post['If-Match'] = "*"; $http.defaults.headers.post['X-HTTP-Method'] = ""; getFormDigest().then(function(digest) { $http.defaults.headers.post['X-RequestDigest'] = digest; var dfd = $q.defer(); $http.defaults.headers.post['X-HTTP-Method'] = ""; // To create a item in list, use the below URL var restUrl = "https: //[SharePoint Site]/_api/lists/getbytitle('Testing’)/items"; // To attach a file to lib use the below REST URL //url: "http://[SharePoint Site]/_api/web/lists/GetByTitle('Testing’)/RootFolder/Files/Add(url='" + file.name + "', overwrite=true)", // file attached for list item — item id is required for attachment. //url: "http://[SharePoint Site]/_api/web/lists/GetByTitle('” + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')", // if (document.getElementById("inputFile").files.length === 0) { // alert("Select a file!"); //return; //} //var restUrl = "http://[SharePoint Site]/_api/web/lists/GetByTitle('Testing’)/items(4)/AttachmentFiles/add(FileName='" + file.name + "')"; $http.post(restUrl, { __metadata: {type: 'SP.Data.TestingListItem'}, Title: $scope.NewItem // binaryStringRequestBody: true, // body: binary }).success(function(data) { //resolve the new data //console.log("success"); // if (document.getElementById("inputFile").files.length === 0) { // alert("Select a file!"); //return; //} //Upload file to list/documentlibrary provided the file is been selected if (document.getElementById("inputFile").files.length > 0) { var parts = document.getElementById("inputFile").value.split("\\"); var filename = parts[parts.length– 1]; var file = document.getElementById("inputFile").files[0]; var binary = "; var restUrlatt = "http://[SharePoint Site]/_api/web/lists/GetByTitle('Testing')/items(" + data.d.ID + ")/AttachmentFiles/add(FileName='" + file.name + "')"; getFileBuffer(file).then( function(buffer) { var bytes = new Uint8Array(buffer); alert(bytes.length); for (var b = 0; b < bytes.length; b++) { binary += String.fromCharCode(bytes[b]); } $http.post(restUrlatt, { __metadata: { type: "SP.Data.TestingListItem" }, binaryStringRequestBody: true, body: binary }).success(function(data) { //resolve the new data console.log("success"); dfd.resolve(data.d); }).error(function(data) { dfd.reject("failed to add book"); console.log("error"); }); return dfd.promise; }); } dfd.resolve(data.d); }).error(function(data) { dfd.reject("failed to add book"); console.log("error"); }); return dfd.promise; }) }; |
Comments