Show SharePoint List Item Level Attachments Using REST API And jQuery

Introduction

In this article, we will explore in Sharepoint 2013, how to show the Sharepoint list item level attachments using REST API and jQuery.  In the previous article, I explained about adding multiple attachments to list item using HTML and jQuery. Now, let’s use some REST API to pull these attachments and display them in the list.

For retrieving attachments, I am using REST API. The URL for all attachment collections can be built like below.

{Site URL}/_api/web/lists/getbytitle([List Title])/items([item ID])/AttachmentFiles

Scenario

I have created a custom list on the host site named “Attachment”. Add multiple items with attachments and let’s say that we want to show the item level attachments in the item selection.



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


Objective

I wanted to get the URLs of the list item attachments so that I could use it in my HTML and 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. An "on change" event is used to fetch and we show the related attachments.

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";
                        getListItems(Requestorurl, function (data) {
                            var results = data.d.results;
                            var htmlStr = "";
                            if (data.d.results.length > 0) {
                                $.each(data.d.results, function () {
                                    if (htmlStr === "") {
                                        htmlStr = "<li><a id='attachment' href='" + this.ServerRelativeUrl + "'>" + this.FileName + "</a></li>";
                                    }
                                    else {
                                        htmlStr = htmlStr + "<li><a id='attachment' href='" + this.ServerRelativeUrl + "'>" + this.FileName + "</a></li>";
                                    }
                                });
                            }
                            else { htmlStr = "<strong>There are no attachments to show in this item.<strong>"; }
                            $('#attachmentsContainer').html(htmlStr);
                        });
                    }
                });

            }, function (data) {
                console.log("An error occurred. Please try again.");
            });

        });
        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);
                }
            });
        }

    </script>

Final Output

1. List Item with attachments.
   
   
   
   
2. List item without attachments.