[SalesForce] Lightning Web Components file preview does not work on mobile version

I created a component in LWC which uses standard Salesforce file preview. It is perfectly working on desktop but nothing happens when I press file name on mobile version. My html code is below:

    <template for:each={files} for:item="file">        
       <span class="slds-truncate">
          <a data-id={file.itemId} onclick={navigateToFiles}>
             {file.name}
          </a>
       </span>
    </template>

And js controller:

    import { LightningElement, api, track, wire } from 'lwc';
    import { NavigationMixin } from 'lightning/navigation';        

    export default class LwcAdmKnowledgeBaseFolderDetails extends NavigationMixin(LightningElement) {
       navigateToFiles(event) {
          this[NavigationMixin.Navigate]({
             type: 'standard__namedPage',
             attributes: {
                pageName: 'filePreview'
             },
             state: {
                recordIds: event.currentTarget.dataset.id
             }
          })
       }
    }

I think this is an issue with LWC because standard Salesforce file preview with the use of lightning:openFiles event works on mobile in my Aura components. Any resolution of this problem?

Best Answer

Try the following method, it will work lightning pages but it won't work in communities. For communities you need to use standard__recordPage as standard_namedPage won't work.

I have used Lightning button in html file and onclick call the following method.

handleFilePreView(event){
  this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'filePreview',
                recordId: event.target.value,
                objectApiName: 'ContentVersion',
                actionName: 'view',
            },
            state: {
                selectedRecordId: event.target.value,
            },
        });
}
Related Topic