How to get Item name and extension from itemID and listID in javascript client object model

Question

in my custom page i receive two parameters - a list ID of a list and an Item ID of an item inside said list. So i write this:

function getfileName() {
    var clientContext = SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getById(listIDFromQuery);
    var oListItem = oList.getItemById(itemIDFromQuery);

}

Now, how do I receive said item's name along with extension?

Answer 1

The field you are looking for is called "FileLeafRef". Your code should looks like this:

 function getItems(){
    var clientContext = SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getById(listIDFromQuery);
    oListItem = oList.getItemById(itemIDFromQuery);
    clientContext.load(oListItem, 'FileLeafRef');
    clientContext.executeQueryAsync(Function.createDelegate(this, this.productReceived),   Function.createDelegate(this, this.failed));
}


    function productReceived() {
        alert(oListItem.get_item('FileLeafRef'));
    }

Remember to run your code after SP.js is loaded using :

ExecuteOrDelayUntilScriptLoaded (getItems, "SP.js")

Answer 2

If you want more information about the file associated with the list item you can get access to the SP.File object and use it.

var file;

function getFileName() {
    var clientContext = SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getById(listIDFromQuery);
    var oListItem = oList.getItemById(itemIDFromQuery);
    file = oListItem.get_file();

    clientContext.load(file);
    clientContext.executeQueryAsync(getFileSuccess, getFileFail);
}

function getFileSuccess() {
    var span = document.getElementById("file-name");
    span.innerHTML = file.get_name();
}

Answer 3

I am hoping this helps someone else as well and save the hours I did hunting for this. I have a document library with a URL column as well. I needed the URL to each file and the URL string in my URL column. I accomplished this with these properties: var objUrl = listItem.get_item('UrlLink') var FileNameFull = listItem.get_item('FileRef').toString(); Full Code:

<script  type="text/javascript">

//

//Call when Client OM is ready
ExecuteOrDelayUntilScriptLoaded(ReadListItems, "sp.js");

//Main Code to retrive Document Library Data (List Data)
function ReadListItems() {
    var listTitle = 'GridAnnouncements'

    //get the current client context
    context = SP.ClientContext.get_current();

    var gridItems = context.get_web().get_lists().getByTitle(listTitle);
    var camlQuery = SP.CamlQuery.createAllItemsQuery(); //PreDefined CAML Query to get all items in List/Document Library

    this.listItems = gridItems.getItems(camlQuery); 
    context.load(listItems);

    //Run the query on the server
    context.executeQueryAsync(onQuerySucceeded, onQueryFailed);
}

//Success CallBack
function onQuerySucceeded(sender, args) {
    var itemString = '';
    var enumerator = listItems.getEnumerator();

    while(enumerator.moveNext()){
        var listItem = enumerator.get_current();
        itemString += 'name: ' + listItem.get_item('Title').toString() + '\n'; // for some reason \n works like <br /> on test page
        try{
            var objUrl = listItem.get_item('UrlLink')
            var FileNameFull = listItem.get_item('FileRef').toString();
            //alert( str ) ;
            itemString += 'FileUri: ' + FileNameFull.toString() + '\n';
            itemString += 'LinkUrl: ' + objUrl.get_url() + '\n'  + '\n';
            }
        catch (err)
            { alert(args);} //primative debugging.. then again I am using SharePoint Designer

        }

    document.getElementById("HeaderContent").innerText = itemString;
}

//Failure CallBack
function onQueryFailed(sender, args) {
    alert('request failed ' + args.get_message() +
                '\n' + args.get_stackTrace());
}
    </script>

I would love to know it helped someone!