Lightning Web Components file preview does not work on mobile version

Question

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?

Answer 1

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,
            },
        });
}

Answer 2

I suggest you should use Iframe to preview the file, you just need to pass the file URL from the content version to the src attribute of Iframe.