Hi all,
I'd like to customize a document library display form to show the file if it's a jpg.

I can do it in the list view but not in the display form, the ctx.CurrentItem.FileRef and the ctx.CurrentItem.File_x0020_Type are Undefined.

(function() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'Description': {
            'DisplayForm': customDisplayField,
            'View': overrideFieldTemplate
      }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function customDisplayField(ctx) {
    return "<img src='" + fileRef + "' style='max-width:200px;'/>";
}
function overrideFieldTemplate(ctx) {

    if (ctx.CurrentItem.File_x0020_Type === "jpg") {
        return "<img src='" + ctx.CurrentItem.FileRef + "' style='max-width:200px;'/>";
    }
    else {
        return "<i>no preview available</i>";
    }
}

Is there a way to retrieve the file path and extension in the display form?
I know that can be a silly question but I'm really new to jsLink, I've started just yesterday.

thankyou
Cinzia

• Edited by CinziaTa Wednesday, August 19, 2015 2:10 PM

Can you try something like ctx.CurrentItem["FileRef"]?

Check If you can use this for 

ctx.CurrentItem.File_x0020_Type

window.location.href.split('.')[window.location.href.split('.').length - 1]

I did try, it's always undefined

function customDisplayField(ctx) {
    return "<img src='" + ctx.CurrentItem["FileRef"] + "' style='max-width:200px;'/>";
}

solved using:

    var fileRef = ctx.CurrentItem.FileLeafRef.FileUrl;
    var fileLeafRef = ctx.CurrentItem.FileLeafRef.BaseName;

• Marked as answer by Patrick_LiangMicrosoft contingent staff, Moderator Wednesday, August 26, 2015 1:15 PM

 var fileRef = ctx.CurrentItem.FileLeafRef.FileUrl;
    var fileLeafRef = ctx.CurrentItem.FileLeafRef.BaseName;

//another ways is

   var fileLeafRef = ctx.CurrentItem.FileLeafRef.EncodedAbsUrl;

fileLeafRef=fileLeafRef.split(".");

you will get the extention in fileLeafRef[1]