Steps to delete attachments of SharePoint list item using REST API in SharePoint 2013

delete attachment sharepoint list item
InfoPath alternatives for form designing SharePoint

Introduction:
In this article we explore in how to delete the Sharepoint list item attachments using REST API and jQuery in Sharepoint 2013. The same code will also work for SharePoint Online Office 365 and SharePoint 2016. To remove attachments I am 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 ])

Read some SharePoint 2013 tutorials on:

Scenario:
I have created a custom list named “Attachments” in 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.


How to Delete a SharePoint List Item Attachment with PowerShell
How to Delete a SharePoint List Item Attachment with PowerShell

I have an item (Item ID: 1) that has the following attachments

sharepoint online delete list item attachment using Rest API
sharepoint online delete list item attachment using Rest API

Objective:
I wanted to get the URLs of the list item attachments with delete option so that I could use it in my html. To fetch the Item ID of the list item and bind to dropdown. Once we have selected any Item ID from the list of Item IDs from Dropdown, the attachments of the respective item are shown. Click on X (Delete icon) to Delete the Attachment on the item.
Use the procedure given below.

Step-1:
Navigate to your 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, you will see an “EDIT SNIPPET” link; click it. You 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’>&times;</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’>&times;</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>

Also read some SharePoint 2013 Rest API articles:
– SharePoint 2013 Using REST API Selecting filtering sorting and pagination in SharePoint list

– CRUD Operation on List Items Using REST API Services In SharePoint 2013 Part 3

– SharePoint 2013 Filtering and sorting of List data using Angular JS and REST API

In the below screen shot we have delete “Account.doc” File on click X (Delete icon)

How to Delete a SharePoint List Item Attachment using Rest API
How to Delete a SharePoint List Item Attachment using Rest API

Final Output:

delete attachment sharepoint list item
delete attachment sharepoint list item
delete attachment sharepoint list item javascript
delete attachment sharepoint list item javascript

Hope this article will be helpful and you will be able to delete list item attachments using Rest API in SharePoint 2016/2013 or SharePoint Online.


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply