SharePoint:How To Delete Attachments Of List Item Using Rest API
Introduction
In this article, we will explore how to delete the Sharepoint list item attachments in Sharepoint 2013, using REST API and jQuery.
To remove attachments, we are using REST API. To delete only specific attachments (based on the attached file name and list Item), we need to build a URL, as shown below
*{SiteURL}/_api/web/lists/GetByTitle([ListTitle])/GetItemById([ItemID])/AttachmentFiles/getByFileName([ FileTitle ]) *
Scenario
We have created a custom list named “Attachments” on the host site and have added multiple items with attachments. Now, let’s say that we want to “Delete” the attachments on any particular item which we want.
We have an item (Item ID: 1) that has the following attachments.
Objective
We want to get the URLs of the list item attachments with delete option so that we could use it in the HTML. To fetch the Item ID of the list item and bind to the drop-down. Once we have selected any Item ID from the list of Item IDs from the drop-down, the attachments of the respective item are shown. Click to Delete the Attachment on the item.
Use the procedure given below.
Step 1
Navigate to the SharePoint 2013 site.
Step 2
From this page, select Site Actions | Edit Page.
Edit the page, go to the Insert tab in the Ribbon and click Web Part option. In Web Parts picker area, go to the Media and Content category, select the Script Editor Web Part and press the Add button.
Step 3
Once the Web Part is inserted into the page, we will see an "EDIT SNIPPET" link. Click it. We can insert HTML and/or JavaScript, as shown below.
<script type="text/javascript" src="../../SiteAssets/Script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Attachments')/items?$select=Id";
getListItems(url, function (data) {
var items = data.d.results;
var SelectElement = '<select id="drpListItem" style="width:100%" name="options"><option value="">Select</option>';
// Add all the Item Id in Dropdown
for (var i = 0; i < items.length; i++) {
var itemId = items[i].Id;
SelectElement += '<option value="' + itemId + '"selected>' + itemId + '</option>';
}
SelectElement += '</select>';
$('#ItemID').append(SelectElement);
// assign the change event
$('#drpListItem').on('change', function () {
if ($(this).val() != "") {
var Requestorurl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Attachments')/items(" + $(this).val() + ")/AttachmentFiles";
var ID = $(this).val();
getListItems(Requestorurl, function (data) {
var results = data.d.results;
var htmlattach = "";
if (data.d.results.length > 0) {
$.each(data.d.results, function () {
if (htmlattach === "") {
htmlattach = "<p class='uploaded_image'> <a href='javascript:void(0);' id='" + ID + "' class='remove'>×</a> <span class='filename'><a id='attachment' href='" + this.ServerRelativeUrl + "'>" + this.FileName + "</a></span></p>";
}
else {
htmlattach = htmlattach + "<p class='uploaded_image'> <a href='javascript:void(0);' id='" + ID + "' class='remove'>×</a> <span class='filename'><a id='attachment' href='" + this.ServerRelativeUrl + "'>" + this.FileName + "</a></span></p>";
}
});
}
else { htmlattach = "<strong>There are no attachments to in this item.<strong>"; }
$('#attachmentsContainer').html(htmlattach);
});
}
});
}, function (data) {
console.log("An error occurred. Please try again.");
});
$(document).on("click", "a.remove", function () {
DeleteItemAttachment($(this).attr('id'), $(this).next('span').text());
$(this).parent().remove();
});
});
function getListItems(siteurl, success, failure) {
$.ajax({
url: siteurl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}
function DeleteItemAttachment(ItemId, FileTitle) {
var Dfd = $.Deferred();
var Url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Attachments')/GetItemById(" + ItemId + ")/AttachmentFiles/getByFileName('" + FileTitle + "') ";
$.ajax({
url: Url,
type: 'DELETE',
contentType: 'application/json;odata=verbose',
headers: {
'X-RequestDigest': $('#__REQUESTDIGEST').val(),
'X-HTTP-Method': 'DELETE',
'Accept': 'application/json;odata=verbose'
},
success: function (data) {
Dfd.resolve(data);
},
error: function (error) {
Dfd.reject(JSON.stringify(error));
}
});
return Dfd.promise();
}
</script>
In the below screenshot, we have deleted “Account.doc” File on click delete http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/how-to-delete-attachments-of-sharepoint-list-item-using-rest-api/Images/image003.png sign.
Final Output
