Display in image from a picture library in SharePoint 2013 using Javascript and REST

Having jumped on the SharePoint bandwagon not too long ago, means that sometimes you end up in a situation where you are “just going to do a simple thing” and it turns out that:

a) It is not so simple, and

b) Finding information is even less simple

I often find myself in this situation, and since I don’t have a decade of SharePoint experience to fall back on, I will have to rely on my old friend Google. Fortunately we have a long and understanding relationship, and even though this time it was harder than usual to find any information to help me, we worked it out in the end as always.

The problem was quite simple:

1. Use a picture library (SharePoint 2013 online) and upload some pictures
2. Using JavaScript/REST, find the image url and display it in an img tag with jquery

I won’t go in detail about how to use jquery in SharePoint, there are plenty other good articles explaining that. But I will explain how to retrieve and use the image.

The key to get this working is to use the correct url for the REST call. At first I tried with the basic approach:

"_api/Web/Lists/GetByTitle('MyPictureLibrary')/items"

This seemed to work, at least it returned all the images. I added a filter to return only the ones I needed:

"_api/Web/Lists/GetByTitle('MyPictureLibrary')/items?$filter=MyProperty eq " +
    propertyValue

This also seemed to work fine. Now I only needed to find the image url inside the Json data. But that was easier said than done. No url was to be found!

After a lot of searching, I finally found the solution. You actually need to specify that the url should be returned:

"_api/Web/Lists/GetByTitle('MyPictureLibrary')/items?$select=EncodedAbsUrl&$filter=MyProperty eq " + propertyValue

I guess the documentation should have given me a hint:

If the $select option isn’t used, all fields are returned except fields that would be resource-intensive for the server to return. If you need these fields, you need to use the $select option and specify them by name. To get all fields, use $select=‘*’.

I guess the url is considered “resource-intensive”. However, I did try specifying $select=’*’, which caused a bad request. I then tried $select=* (without quotes) which did not cause an error, but it did not return the url either.

Anyway, using the $select=EncodedAbsUrl option, I was able to return a property with the same name in the returning Json. I then set the img src to this url using jquery and then it worked. Here is the code you need:

First, include the request executor:

<script type="text/javascript">

$(document).ready(function() {
 //load request executor
 $.getScript("/_layouts/15/SP.RequestExecutor.js", LoadPage);
});

</script>

The LoadPage function calls the other functions

function LoadPage() {

   LoadMyPicture(1);
}

This function sets the image url

function LoadMyPicture(myId) {
 debugger;
 image = $("#myImage");

 
 $.when(RetrieveMyImageAsync(myId)).then(function(imageInfo) {
  if (imageInfo.results.length > 0) {
   image[0].src = imageInfo.results[0].EncodedAbsUrl;
  }
  
 });
}

And finally, the function that does all the work:

function RetrieveImageAsync(propertyValue) {
  var dfd = new jQuery.Deferred();  // deferred object

  var siteurl = _spPageContextInfo.webServerRelativeUrl;
  var executor = new SP.RequestExecutor(siteurl);

  executor.executeAsync( {
    url :
        siteurl +
            "//_api/Web/Lists/GetByTitle('MyPictureLibrary')/items?$select=EncodedAbsUrl&$filter=MyProperty eq " +
            propertyValue,
    method : "GET",
    headers : { "Accept" : "application/json; odata=verbose" },
    success : successHandler,
    error : errorHandler
  });

  function successHandler(data) {
    var jsonObject = JSON.parse(data.body);
    var data = jsonObject.d;
    dfd.resolve(data);
  }

  function errorHandler(data, errorCode, errorMessage) {
    alert(errorMessage);
    dfd.reject(errorMessage);
    debugger;
  }

  // Return the Promise so caller can't change the Deferred
  return dfd.promise();
}

Note that in order for the filter to work, you must have a column in the picture library corresponding to the ‘MyProperty’ in the ajax call.

Print posted @ Tuesday, January 28, 2014 10:03 AM