LWC Content Document preview is not working

Question

I'm having issues with opening a Content Document preview in my LWC component. Here is my code:

HTML:

<template>
    <template if:true={files}>
        <ul>
            <template for:each={files} for:item="i">
                <template if:true={i.Title}>
                    <li key={i.Id}><a data-id={i.Id} onclick={navigateToFiles}>{i.Title}</a></li>
                </template>
            </template>
        </ul>
    </template>
</template>

JavaScript:

import { LightningElement, api, track, wire } from 'lwc';
import getAttachmentFiles from "@salesforce/apex/Utility.getAttachmentFiles";
import { NavigationMixin } from 'lightning/navigation';

export default class ShowAttachmentDetails extends LightningElement {
    @api recordId;
    @api files = [];

    renderedCallback(){
    }

    @wire(getAttachmentFiles, {recordId: '$recordId'})
    wiredAttachments({ error, data }){
        if (this.recordId){
            if (data){
                this.files = data;
            } else if (error){
                //error handling
            }
        }
    }

    navigateToFiles(e){
        const attachmentId = e.target.dataset.id;
        if(attachmentId){
            console.log('Selected Id -- ' + attachmentId);
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    pageName: 'filePreview'
                },
                state: {
                    recordIds: attachmentId,
                    selectedRecordId: attachmentId
                }
            });
        }
    }
}

When I click on the link, I see the console line and then nothing else happens. I got the above code from Salesforce documentation available here: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_open_files

For those wondering why I need to write a custom component instead of using a related list, this is for one of those standard objects where there are no out of the box related lists. Unfortunately, it has to be custom.

Any help will be appreciated.

Answer 1

You have missed applying the NavigationMixin function to your component’s base class, so your component will not be able to access the APIs exposed by the navigation service (i.e., Navigate & GenerateUrl). Refer to the code below and replace in your component JS.

export default class ShowAttachmentDetails extends NavigationMixin(LightningElement) {

Also, specify type: 'standard__namedPage'.

As long as the ContentDocumentIDs are fetched correctly from the apex and populated in files object, you should be able to preview the files. I was able test your code (with my own implementation of apex code) and it worked. Note that if you are trying this in community page, it might not work because as the type attribute suggests, this is meant for standard or custom salesforce pages (not hosted in community).