Hello everyone,
In this article we will see how to upload multiple attachments in SharePoint List Item using Angular. This is the continuation of my previous article – Remove Attachments on SharePoint List Item using Angular.
Utilities.js
(function () {
'use strict';
var serviceId = 'Utilities';
var Utilities = function () {
var service = this;
service.spHostUrl = _spPageContextInfo.siteAbsoluteUrl + _spPageContextInfo.webServerRelativeUrl;
return {
getRequestHeader: getRequestHeader,
updateRequestHeader: updateRequestHeader,
deleteRequestHeader: deleteRequestHeader
};
function getRequestHeader() {
var getHeader = {
'headers': {
'accept': 'application/json;odata=verbose'
}
};
return getHeader;
}
function updateRequestHeader() {
var updateHeader = {
'headers': {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
'content-type': 'application/json;odata=verbose',
'accept': 'application/json;odata=verbose',
"IF-MATCH": "*",
"X-HTTP-Method": "MERGE"
}
};
return updateHeader;
}
function deleteRequestHeader() {
var deleteHeader = {
'headers': {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
'content-type': 'application/json;odata=verbose',
"IF-MATCH": "*"
}
};
return deleteHeader;
}
}
var module = angular.module("Mainapp");
module.factory(serviceId, Utilities);
}());
List_Context.js
(function () {
'use strict';
var serviceId = 'List_Context';
var List_Context = function ($http, $q, Utilities) {
return {
getListData: getListData,
updateListData: updateListData,
checkFileExistsAndRemove: checkFileExistsAndRemove,
uploadFileSP: uploadFileSP,
getFileBuffer: getFileBuffer,
deleteFile: deleteFile
};
function getListData(urlValue) {
var deferred = $q.defer();
$http.get(urlValue, Utilities.getRequestHeader())
.then(function (response) {
deferred.resolve(response.data.d);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
};
function updateListData(listId, itemId, itemData, listName) {
var deferred = $q.defer();
var updateURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetById('" + listId + "')/Items" + '(' + itemId + ')';
var entityFullName = getEntityTypeFullName(listName);
var item = $.extend({
'__metadata': {
'type': entityFullName
}
}, itemData);
var jsonData = JSON.stringify(item);
$http.post(updateURL, jsonData, Utilities.updateRequestHeader())
.then(function (response) {
deferred.resolve(response.data.d);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
};
function checkFileExistsAndRemove(fileURL) {
var deferred = $q.defer();
var fullFileURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getFileByServerRelativeUrl('" + fileURL + "')";
$http.get(fullFileURL, Utilities.getRequestHeader())
.then(function (response) {
deleteFile(fullFileURL)
.then(function (response) {
deferred.resolve(response);
});
}, function (error) {
console.log('File does not exist');
deferred.reject(error);
});
return deferred.promise;
}
function uploadFileSP(listName, itemID, bufferVal, fileName) {
var urlValue = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items(" + itemID + ")/AttachmentFiles/add(FileName='" + fileName + "')";
$.ajax({
url: urlValue,
type: "POST",
data: bufferVal,
async: false,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
"Content-Type": undefined
},
success: fileSuccess,
error: fileError
});
function fileSuccess(data) {
console.log('File Added Successfully.');
}
function fileError(error) {
console.log(error.statusText + "nn" + error.responseText);
}
}
function getFileBuffer(file) {
var deferred = $.Deferred();
var reader = new FileReader();
reader.onloadend = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
}
function deleteFile(fileURL) {
var deferred = $q.defer();
$http.delete(fileURL, Utilities.deleteRequestHeader())
.then(function (response) {
console.log('Deleted the attachment.');
deferred.resolve(response);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
};
//Supporting function
function getEntityTypeFullName(listName) {
return "SP.Data." + listName.replace(' ', '_x0020_') + "ListItem";
}
var module = angular.module("Mainapp");
module.factory(serviceId, ['$http', '$q', 'Utilities', List_Context])
}());
Main.js
(function () {
'use strict';
var controllerId = 'Mycontroller';
var app = angular.module("Myapp", []);
var Mycontroller = function ($scope, $q, List_Context, Utilities) {
function SaveData() {
var updatingVals = {};
updatingVals['Title'] = "TEST Title";
var filesAdd = {};
//Please refer previous article to know how to get attachment value in attachedFile scope variable
//https://www.sharepointpals.com/post/Get-all-attachments-from-SharePoint-List-Item-using-AngularJS
filesAdd = $scope.attachedFile;
var listID = "BF6BCA2E5-12B5-452F-8EA6-B6789AF4CDEB";
var listItemID = 10;
var listName = "MyList";
SP_WaitScreen();
var promises = [];
List_Context.updateListData(listID, listItemID, updatingVals, listName)
.then(function (value) {
//Please refer previous article to see how to get removeFile values -
//https://www.sharepointpals.com/post/How-to-handle-multiple-file-selection-and-validation-on-input-file-type-using-AngularJS
angular.forEach($scope.removeFile, function (filePath, key) {
promises.push(List_Context.checkFileExistsAndRemove(filePath));
});
var filesToAdd = {};
filesToAdd = $scope.attachedFile;
$q.all(promises)
.then(function (value) {
AddingValidAttachments(filesToAdd, listName, listItemID);
}, function (reason) {
SP_WaitScreen_Close();
window.open(window.parent.location.reload(true), "_parent", "");
});
}, function (reason) {
SP_WaitScreen_Close();
window.open(window.parent.location.reload(true), "_parent", "");
});
}
function AddingValidAttachments(allFiles, listName, itemID) {
var promises = [];
var newlyAdded = {};
newlyAdded = allFiles;
if (newlyAdded.length > 0) {
for (var index = newlyAdded.length - 1; index >= 0; index--) {
if (newlyAdded[index]._file == undefined) {
newlyAdded.splice(index, 1);
}
}
if (newlyAdded.length > 0) {
var numberOfFiles = newlyAdded.length;
angular.forEach(newlyAdded, function (fileValues, key) {
if (numberOfFiles > 0)
List_Context.getFileBuffer(fileValues._file)
.then(function (bufferVal) {
List_Context.uploadFileSP(listName, itemID, bufferVal, fileValues._file.name);
numberOfFiles--;
if (numberOfFiles == 0) {
window.open(window.parent.location.reload(true), "_parent", "");
}
});
});
}
else {
window.open(window.parent.location.reload(true), "_parent", "");
}
}
else {
window.open(window.parent.location.reload(true), "_parent", "");
}
}
//OOTB Wait modal dailog
function SP_WaitScreen() {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
window.parent.eval("window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Working on it...', '');");
});
}
function SP_WaitScreen_Close() {
if (window.frameElement != null) {
if (window.parent.waitDialog != null) {
window.parent.waitDialog.close();
}
}
}
}
app.controller(controllerId, Mycontroller);
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^s*(https?|file|blob):/);
}]);
});
<script type="text/javascript" src="../../../../SiteAssets/js/sppals/Controllers/Main.js"></script>
<!--Services-->
<script type="text/javascript" src="../../../../SiteAssets/js/sppals/Services/List_Context.js"></script>
<script type="text/javascript" src="../../../../SiteAssets/js/sppals/Services/Utilities.js"></script>
<div id="divNew" ng-app="Myapp">
<ng-form id="EditForm" name="EditForm">
<div ng-controller="Mycontroller">
<div>Attach Memo:</div>
<div>
<span id="attach">
<input id="uploadFileID" type="file" ng-file-model="files" />
<p class="attach-Text" ng-repeat="file in attachedFile">
<a target="_blank" href="{{file.ServerRelativeUrl}}" ng-href="{{file.ServerRelativeUrl}}">{{file.FileName}}</a>
<a title='Click to Remove' ng-click="removeFile(attachedFile, $index)">
<img class="deleteIcon" src='../../../../SiteAssets/img/Delete_icon.png' />
</a>
</p>
</span>
</div>
<input type="button" id="btnSave" ng-disabled="EditForm.$invalid || SaveButtonValid();" ng-click="SaveButtonClick()" title="Click to Save" value="Save" />
</div>
</ng-form>
</div>
Happy Coding
Ahamed
Leave a comment