Geeks With Blogs
Thorvald Bøe

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.

Posted on Tuesday, January 28, 2014 10:03 AM jquery , sharepoint , REST , javascript | Back to top


Comments on this post: Display in image from a picture library in SharePoint 2013 using Javascript and REST

# re: Display in image from a picture library in SharePoint 2013 using Javascript and REST
Requesting Gravatar...
Hi Thorvald, I just used item.PictureURL.Url and it did work. I didn't do anything as you mentioned in this article. Incase you want to try simple.
Left by Khushi on May 06, 2014 9:34 PM

# re: Display in image from a picture library in SharePoint 2013 using Javascript and REST
Requesting Gravatar...
Hi Khushi,
thanks for your comment.
That is strange, maybe I missed something last time or maybe there are other unknown factors causing different behaviour.
I will try it out at get back to you.
Left by Thorvald on May 07, 2014 9:29 AM

# re: Display in image from a picture library in SharePoint 2013 using Javascript and REST
Requesting Gravatar...
Thanks man, you really helped after many useless days :D ..
Left by AbdAllah on Apr 13, 2016 3:02 PM

# re: Display in image from a picture library in SharePoint 2013 using Javascript and REST
Requesting Gravatar...
I am really glad to hear that, AbdAllah!

cheers,
Thorvald
Left by Thorvald on Apr 13, 2016 3:22 PM

# re: Display in image from a picture library in SharePoint 2013 using Javascript and REST
Requesting Gravatar...
Thanks a lot ! this article helped me out, using "EncodedAbsUrl" did the trick :)
Left by Tom marchand on Jun 09, 2016 11:18 AM

# re: Display in image from a picture library in SharePoint 2013 using Javascript and REST
Requesting Gravatar...
Glad it helped you! :)
-Thorvald
Left by Thorvald on Jun 09, 2016 11:26 AM

Your comment:
 (will show your gravatar)


Copyright © Thorvald Bøe | Powered by: GeeksWithBlogs.net