I have a SharePoint hosted html file with a form that I use to add a new list item to a SP list via the REST API. I am also reading data from the list using AngularJS for both reading and writing to list. In the code below I am trying to upload files to the list. Adding new list items work with no problem. The problem is uploading files. I think the form is closing without the files getting uploaded and I don't know how to pause it to wait for files to be uploaded. Or my code is not correctly uploading to SP. How should I be calling the uploading files function to upload the files to the list? Thank you.
This is what I have for the file upload element in the form. I am using the getFileData() to read the file names and display them in the div with id of files.
<form ng-submit="updateList()">
...
<div>
<input type="file" class="form-control input-lg" name="attachments" id="attachments" multiple onchange="getFileData()">
</div>
<div id="files"></div>
...
</form>
This is my controller code.
// BEGIN controller code
app.controller('supportController',
function($scope, $http) {
// BEGIN upload file code
function uploadFile(listname, ID, file) {
var formdigest = $scope.getFormDigest();
var getFileBuffer = function(file) {
var deferred = $.Deferred();
var reader = new FileReader();
reader.onload = function(e) {
deferred.resolve(e.target.result);
}
reader.onerror = function(e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
};
getFileBuffer(file).then(function(buffer) {
alert(file.name);
$.ajax({
url: "https://.../_api/web/lists/getbytitle('" + listname + "')/items(" + ID + ")/AttachmentFiles/add(FileName='" + file.name + "')",
method: 'POST',
async: false,
data: buffer,
processData: false,
headers: {
"Accept": "application/json; odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": formdigest
},
success: function(data) {
console.log("file attached to the list item successfully...");
},
error: function(data) {
console.log("Error message: " + JSON.stringify(data.responseJSON.error));
}
});
});
}; // END file upload code
...
// BEGIN code to post a new entry to list
$scope.updateList = function() {
...
jQuery.ajax({
url: "https://.../_api/web/lists/GetByTitle('EU34SupportTracker')/items",
method: "POST",
data: JSON.stringify({
'__metadata' : {'type': 'SP.Data.EU34SupportTrackerListItem'},
'Title': title,
...
'Ticket_x0020_number': externaltt
}),
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": formdigest
},
success: function(data) {
console.log("entry created successfully...");
console.log(data.d.ID);
// CALL UPLOAD FILE FUNCTION HERE
$.When(uploadFile('EU34SupportTracker', data.d.ID, $("#attachments")[0].files[0])).then(location.reload());
//location.reload();
},
error: function(data) {
//console.log("#__REQUESTDIGEST".val());
console.log("Error message: " + JSON.stringify(data.responseJSON.error));
}
});
// close modal
$('#myModal').modal('hide');
location.reload();
}; // END code to upload to list
