Get Listitem Attachment URL

Question

I want to get the Attachment URL with via REST or Javascript. Is there an easy way?

The reason I need this, is because I want to build a marketplace in my company.

1. User creates new list item
2. User can upload a picture
3. User saves form

I want to display the list item in a "nice" way with picture, name, title... I got everything, but not the attachment URL.

Here my code:

<script type="text/javascript">

$(document).ready(function() {

    // Rest URL
    var requestUri = "/_api/lists/getbytitle('Marketplace')/items";
    var picUrl;

        $.ajax({
            url: requestUri,
            type: "GET",
            headers: { "ACCEPT": "application/json;odata=verbose" },
            success: function (data) {

                $.each(data.d.results, function (i, item){
                   var title = item.Title;
                   var searchOffer = item.SearchOffer;
                   var category = item.Category;
                   var description = item.Description;
                   var price = item.Price;
                   var id = item.ID;
                   var authorId = item.AuthorId;


                    document.getElementById("market" + i).innerHTML = "<img class='img-responsive' src='**???**' alt=''><h2>" + title + "</h2><p>" + description + "</p>";

                })
            },
            error: function () {
                alert("Error getting the Marketplace Items");
            }                     
        });
  });      

</script>

In the innerHTML I need the Attachment URL as source.

An other option I already tried was to use this requestUri:

items?$select=Attachments,AttachmentFiles,Title&$expand=AttachmentFiles

But then I cant get the ServerRelativeUrl into a variable... Any ideas there?

I tried it also with a second REST Request /items(id)/AttachmentFiles, but it can't be that hard to get this, right?

Any help?

Answer 1

Just change below things in your code.

//Change requestURI
 var requestUri = "{Your Web URL}/_api/Web/Lists/getbytitle('Marketplace')/items?$expand=AttachmentFiles";

//Add below line inside loop of results
var picUrl = item.AttachmentFiles.results[0].ServerRelativeUrl;

and you will have "ServerRelativeURL" of item attachment in "picURL" variable.

Answer 2

Thanks Torque! I just did it myself :D But, I knew there has to be an easy way.

Here my script:

<script type="text/javascript">

$(document).ready(function() {

    // Rest URL
    var requestUri = "/_api/lists/getbytitle('Marketplace')/items?$select=SearchOffer,Category,Description,Price,ID,AuthorId,Attachments,AttachmentFiles,Title&$expand=AttachmentFiles";


        $.ajax({
            url: requestUri,
            type: "GET",
            headers: { "ACCEPT": "application/json;odata=verbose" },
            success: function (data) {

                $.each(data.d.results, function (i, item){
                    var title = item.Title;
                    var searchOffer = item.SearchOffer;
                    var category = item.Category;
                    var description = item.Description;
                    var price = item.Price;
                    var id = item.ID;
                    var authorId = item.AuthorId;
                    var attachmentUrl = item.AttachmentFiles.results[0];

                    //alert(attachmentUrl.ServerRelativeUrl);

                    document.getElementById("market" + i).innerHTML = "<img class='img-responsive' src=" + attachmentUrl.ServerRelativeUrl + " alt=" + attachmentUrl.FileName + "><h2>" + title + "</h2><p>" + description + "</p>";

                })
            },
            error: function () {
                alert("Error getting the Marketplace Items");
            }                     
        });
  });      

</script>

That's it!

Answer 3

Get Attachments in SharePoint list. This code is working fine for me:

getAttachmentFiles(ListName, ListId, printAttachments);



function printAttachments(urls) 
{
    if (urls.length > 0) {

        for (var i = 0; i < urls.length; i++) {
            var fileName = urls[i].split('/');
           var files=$("#FileAttachments").append('<a href="' + urls[i] + '" target="_blank" >' + fileName[fileName.length - 1] + '</a><br/>');

        };
    }
    else {
        $("#fileContainer").hide();
    }
}

 function getAttachmentFiles(listName, listItemId, complete) {
    $().SPServices({
        operation: "GetAttachmentCollection",
        async: false,
        listName: listName,
        ID: listItemId,
        completefunc: function (xData, Status) {
            var attachmentFileUrls = [];
            $(xData.responseXML).find("Attachment").each(function () {

                var url = $(this).text();
                attachmentFileUrls.push(url);

            });
            complete(attachmentFileUrls);

        }
    });
}