Custom Lookup to a Document Library

Hi there,

In one of my lists, i have set a lookup to a document library (images). In my form, i want to render a dropdown which displays the image and the file name.

Following one of your articles, i have added a fp.beforeRender and created a custom template for my dropdown. Everything works fine, but when i select one of the items, i want to have the filename displayed in the text of the dropdown. Now i get a (null).

In the screenshot you can see how the lookup is configured.
The template is set like this, and i would like to see the data.File.Name when an item is selected in the dropdown. Any idea how?

fd.spBeforeRender(function(){
    let template = '';
    template += '# if (data.File) { # <img src="https://swarovski.sharepoint.com/#= data.File.ServerRelativeUrl #" width="100" height="100" class="lookup-image" /> # } #';
    template += '<span class="lookup-col">';
    template += '<p class="lookup-title"> #: data.File.Name # </p>';
    template += '</span>'; 
    fd.field('RefPreviewPicture').widgetOptions = {
        template: template,
        height: 400,
        virtual: {
            itemHeight: 110
        },
        dataSource: {
            pageSize: 16
        }
    }
})

Thanks!

Dear @Pablo_Medina,
Template is only about display in the dropdown menu - the value you see in the field selected is the one that you choose in Lookup field settings. This field can be changed in List Settings - RefPreviewPicture.