Get Image From SharePoint App Host Web Picture Library Using JavaScript

In this article I would like to share the code to get the Image from an APP host web picture library in a SharePoint hosted APP.

Use the following code to get an image from a library using the JavaScript object model:

• getLibraryfromHostweb: This method is used to get all the libraries from the app host web.
  
  
• IsListExist: On the success method of getLibraryfromHostweb, it will check whether the library (var libraryName = "NewsPictureLibrary";) is already available or not.
  
  
• getListItemCollection: If the list is available it will call the getListItemCollection method, it will get the item collection from the current library with Query.
  
  
• OnGetListItemSuccess: Then finally get the image name from the current library in this success event.

Variables declaration:

var libraryName = "NewsPictureLibrary";
var hostWebUrl;
var appWebUrl;
var ctx;
var appCtxSite;
var web;
var libraries;
var listEnumerator;
var currentlibrary;
var library;

//This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
// Get the URI decoded URLs.
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
//calling the get image library method in ready function to get image on when page is ready
    getLibraryfromHostweb();
});

//This function is used to get the host web url
function manageQueryStringParameter(paramToRetrieve) {
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve) {
            return singleParam[1];
        }
    }
}

//Get Image from Picture Library
function getLibraryfromHostweb ()
{
//Get the app web context
    ctx = new SP.ClientContext(appWebUrl);
  //Get the app web context
    appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
//get current web from host web
    web = appCtxSite.get_web();
//get all libraries from web
    libraries = web.get_lists();
// .load() tells CSOM to load the properties of this object
    ctx.load(libraries);
// now start the asynchronous call and perform all commands
    ctx.executeQueryAsync(IsListExist, OnGetListItemFailure);
// method will exit here and IsListExist or OnGetListItemFailure will be called asynchronously
}

//check whether list is exist or not
function IsListExist() {
    debugger;
    //alert('check whether list is exist or not');
    var isListAvail = false;
    listEnumerator = libraries.getEnumerator();
    while (listEnumerator.moveNext()) {
     currentlibrary = listEnumerator.get_current();
//check whether the library name is equal to current library
        if (currentlibrary.get_title() == libraryName) {
            isListAvail = true;
            //Retrieve list items from the lists
            getListItemCollection();
        }
    }
    if (!isListAvail) {
        alert('News Library is not available in this site');
    }

}

//Get image collection from Library
function getListItemCollection() {
    debugger;
//Get the library by Title
    library = libraries.getByTitle(libraryName);
//get two items on library using caml Query
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View>" + "<RowLimit>2</RowLimit>" + "</View>");
//returns the item collectionbased on the query.
// “getItems” is one of the method that is used to retrieve the items from the list using the listitem object. This method specifies which items to return.
    itemCollection = library.getItems(camlQuery);
    ctx.load(itemCollection);
    ctx.executeQueryAsync(OnGetListItemSuccess, OnGetListItemFailure);
}

//Get Image name from Library
function OnGetListItemSuccess() {
    debugger;
    var imageStr = "";
    var ImageName;
//get_count() is used to get the items from current library
    if (itemCollection.get_count() > 0) {
        var enumerator = itemCollection.getEnumerator();
        while (enumerator.moveNext()) {
            var currentListItems = enumerator.get_current();
//get Image Name from current Item
            ImageName = currentListItems.get_item("FileLeafRef");
            }
        }
    }

//Failure method
function OnGetListItemFailure(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

In the AppManifest.xml file give read permission to the Site Collection.

Summary

In this article we explored how to get an image from a SharePoint app host web picture library using the JavaScript object model in a SharePoint Hosted App.