How To Delete Attachments Of SharePoint 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, 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 ]) 

Scenario

I 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.

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

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 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 on 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'>×</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  sign.

Final Output