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
<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}}Create a Script.js File and copy and paste the below code:
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;
})
};
Leave a comment