I'm developing a SharePoint Hosted Add-in that communicates with a list that lives in the app web with help of REST. I using CRUD operations and have a form in my full page app page that works great, users can post text, dates, etc into the list. I do also have an admin interface so the users can update the items in the list and also delete them. So far so good.
In this add-in, the users can also send a file (attachment) direct from the form together with other column data, but the issue I’m facing now is that the attachment function works just “some time”. Sometimes it works great, but sometimes it won't work
Error occured.{"error":{"code":"-2147024809, System.ArgumentException","message":{"lang":"en-US","value":"Item does not exist. It may have been deleted by another user."}}}
My guess here is that my functions are not rendering in the correct order so to say, I have tried with the jQuery timeout but so far with not success. If I debug in chrome dev toolbar it works fine, when I run everything “row by row”, not sure what do to here. If you don’t have the solution in the code exactly it’s ok, but what I’m looking for is ideas that can lead me forward. i Great if someone has some clues here
<body>
<button type="submit" class="btn btn-primary" id="fileFormSubmit"
onclick="AddAttachments();"> Submit </button>
</body>``
<script>
var id;
var idArray = [];
var tableContent;
$(document).ready(function () {
getCurrentGroupId();
$('#fileFormSubmit').click(function (e) {
e.preventDefault();
//Check for edit or new and call update or add function
if ($('#myModalLabel').html() === 'Add New Item') {
addFile($('#purpose').val(), $('#comments').val());
} else {
//edit knapp i varje rad
UpdateFiles($('#fileId').val());
}
$('#fileFormSubmit').prop('disabled', true);
AddAttachments();
});
});
function GenerateTableFromJson(objArray) {
var tableContent =
'<table id="FilesTable" class="table table-striped table-bordered"
cellspacing = "0" width = "100%" > ' +
'<thead><tr>' + '<th>ID</th>' + '<th>Purpose</th>' +
'<th>Comments</th>' + '<th>Actions</th>' + '</tr></thead>';
for (var i = 0; i < objArray.length; i++) {
tableContent += '<tr>';
tableContent += '<td>' + objArray[i].Id + '</td>';
tableContent += '<td>' + objArray[i].Purpose + '</td>';
tableContent += '<td>' + objArray[i].Comments + '</td>';
tableContent += "<td><a id='" + objArray[i].Id + "' href='#'
style = 'color: orange' class='confirmEditFileLink' > " +
"<i class='glyphicon glyphicon-pencil' title='Edit Item'></i>
</a >& nbsp & nbsp";
tableContent += "<a id='" + objArray[i].Id + "' href='#' style='color:
red' class='confirmDeleteFileLink'>" +
"<i class='glyphicon glyphicon-remove' title='Delete File'></i>
</a >& nbsp & nbsp";
tableContent += "<a id='" + objArray[i].Id + "' href='#'
class='confirmListItemDetailsLink' > " +
"<i class='glyphicon glyphicon-cog' title='Link to List Item'></i>
</a ></td > ";
tableContent += '</tr>';
idArray.push(objArray[i].Id);
}
getlastelementofarray();
return tableContent;
};
function getlastelementofarray() {
return (idArray[idArray.length - 1]);
}
var fileInput = document.getElementById("GenerateTableFromJson");
function AddAttachments() {
var aId = getlastelementofarray();
var fId = 1;
if (aId === undefined) {
aId = fId
} else {
aId = aId + 1
}
console.log(aId);
var digest = "";
$.ajax(
{
url: "../_api/contextinfo",
method: "POST",
headers: {
"ACCEPT": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
error: function (data) {
},
success: function (data) {
digest = data.d.GetContextWebInformation.FormDigestValue;
},
}).done(function () {
var fileInput = $('#attachments');
var fileName = fileInput[0].files[0].name;
var reader = new FileReader();
reader.onload = function (e) {
var fileData = e.target.result;
var res11 = $.ajax(
{
url:
"../_api/web/lists/getbytitle('ExpenseList')/items(" + aId +
")/AttachmentFiles/add(FileName='" + fileName + "')",
method: "POST",
Attachments: true,
binaryStringRequestBody: true,
data: fileData,
processData: false,
headers: {
"ACCEPT": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
//"X-RequestDigest": digest, //or use this in the headers
"content-length": fileData.byteLength
},
success: function (data) {
location.reload();
},
error: function (data) {
console.log("Error occured." + data.responseText);
//alert("Error occured." + data.responseText);
}
});
};
reader.readAsArrayBuffer(fileInput[0].files[0]);
});
}
</script>