I just need the attachment filename of list item to display in a display page, not the link. Let's say List name: MyList and item ID: 1

When I try to use the ajax and I did some test. Somehow it stop into the ajax function. Do I need to do anything in the server to make it work?

Here is my testing code:

  var attachments = function(url, name, ID) {

  var urlstr = url + "/_api/web/lists/getbytitle('" + name + "')/items(" + ID + ")/AttachmentFiles/";
  document.getElementById('attachments').innerHTML = '<table><tr><td>'+url+'</td></tr></table>';
 //It stops working right here. everything is working above this point.

    type: "GET",
    url: urlstr,
    headers: {
      "accept": "application/json;odata=verbose",
      "content-type": "application/json;odata=verbose"
    success: function(data) {
    error: function() {alert(ID)}


<button type='button' onclick="attachments('MySite', 'MyList', 1 )"> Get Files </button>
<div id="attachments" ></div>
  • I found something like this. Could anyone told me that how I can call this function to display the filename? sharepoint.stackexchange.com/questions/126149/… – JW120 Aug 24 '15 at 13:33
  • What version of SharePoint are you using? – Arsalan Shahid Aug 24 '15 at 13:44
  • Where do you want to display this custom link? On the display form, edit form, or in search results somewhere? – Lance Aug 24 '15 at 21:36
  • I just create a standard custom display form in SP 2013. – JW120 Aug 26 '15 at 20:21
  • 1
    Instead of putting code throughout the comments, why not update your question with more details including what you have tried, what research you have already done, etc. – Lance Aug 27 '15 at 6:48

Option 1: Search Display Template

If you are using SP2013 and want to display the list attachments in search results, try this article:

Solution to displaying attachments for a list item in a search result

There’s an undocumented managed property named LinkOfficeChild which gives us exactly what we need. If you split the value on line break you will get the count.

Instead of getting the count, get the filenames by splitting the array items. Here is some code I am using on my site:

// check for attachments
if (ctx.CurrentItem.LinkOfficeChild) {
    var attachmentLinks = ctx.CurrentItem.LinkOfficeChild.split(/\n+/);
    var numberOfLinks = attachmentLinks.length;
    var linkMarkup = "<ul>";
    for (var i = 0; i < numberOfLinks; i++) {
        var filename = attachmentLinks[i].substring(attachmentLinks[i].lastIndexOf('/') + 1);
        linkMarkup = linkMarkup + "<li><a href='" + attachmentLinks[i] + "'>" + filename + "</a></li>";
    linkMarkup = linkMarkup + "</ul>";

For more basic information see Introduction to display templates

Option 2: Customise Display Form

If you want to get the filenames on the display form using JavaScript, try something like this:

var attTable = document.getElementById('idAttachmentsTable');
if (attTable) {
  var attachments = attTable.getElementsByTagName('a');
  for (var i = 0; i < attachments.length; i++) {
    var filename = attachments[i].innerText;
    // do something with the filename

I grabbed idAttachmentsTable by inspecting the OOTB display form.

  • Is there anyway without install any additional package in the SP? Thanks! – JW120 Aug 26 '15 at 16:10
  • Not sure what you mean by package? The snippet I provided would go in a custom display template which you can upload with design manager. – Lance Aug 26 '15 at 16:16
  • I'm assuming you are running 2013 but perhaps that is wrong. Please answer these other comments so we can better help you. – Lance Aug 26 '15 at 16:18
  • It is Sharepoint 2013. – JW120 Aug 26 '15 at 20:19
  • How can I use the option 1 and how to put it into the Script tag? How can I call it from the regular tag? Please give me the detail. Thanks! – JW120 Aug 27 '15 at 5:36

You can use rest api to get just the name of all the attachments.

You need to paste the function in the script tag in your page, and put the html snippet anywhere you wish to show your attachments.

Function to get attachments, this goes into your script tag :

var attachments = function(url, name, ID) {


    method: 'GET',
    url: url + "/_api/web/lists/getbytitle('" + name + "')/items(" + id + ")/AttachmentFiles/",
    header: {
      "accept": "application/json;odata=verbose",
      "content-type": "application/json;odata=verbose"
    success: function(data) {
      var str = '<table>';
      for (var i = data.d.results.length - 1; i >= 0; i--) {

        //iterates through all the attachments

        str += "<tr><td>" + data.d.results[i].FileName + "</td></tr>";

      str += '</table>';

      //now the variable str has all the filenames in table structure. 
      //We now append this complete structure into a div with id attachments

      document.getElementById('attachments').innerHTML = str;

    error: function() {}


The html will look something like this, repalace the url, name and id as you see fit :

button type='button' onclick="attachments('http://abc.sharepoint.com', 'List1', 12 )"> Get Files </button>
<div id="attachments" ></div>

This function on resolution returns an array of files. You can iterate and get just file names like for example - data.d.results[0].FileName will give you file name of the first file.

  • I am sorry. I am a dummy. Could you tell me how can we use the function? For example, How to create something like this in javascript. -----<td>filename.ext</td>------ ----------------------------------- <td> <script> attachment(<name>, <ID>).then( //success - promise gets resolved function() { return data[0].FileName }, //error function() { alert('error')}; ) </script> </td> – JW120 Aug 24 '15 at 15:26
  • Can you write some simple code to write the filename without calling the function? So I can put the code direct into <script></script> and return it in the browser. Many thanks! – JW120 Aug 24 '15 at 20:48
  • I have simplified the above code as much as I possibly can. You can now put the function in a <script> tag, and then use the html snippet anywhere in your page to use the functionality – Swayam Siddha Aug 25 '15 at 7:03
  • Thanks for your update. Now I can use the script in my page. But after I debugged, I found the $.ajax(); is functioning. How can I know? I put alert('test'); inside each success: function(data) {} and error: function() {}. It did not pop up any Alert. But when I put "abc.sharepoint.com/_api/web/lists/getbytitle('List1')/…", it returned the item info on the browser. Do you have any hint? Thank you so much for your help! – JW120 Aug 26 '15 at 15:57
  • Make sure you have a reference to jquery before your script tag . Add <script type="text\javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"> before the tag containing the function. abc.sharepoint.com/ is just a dummy, you need to put the site url that you are querying from in order to use it. Also replace list1 with list name that you want to query from and 12 with id of the list item item that you want to query the associated files from – Swayam Siddha Aug 26 '15 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.