How to preview the file attached in the ContentVersion

We have a requirement to preview the related file in the lwc component. Something which is similar to a modal dialog which displays the file if it is a known format to the browser (like pdf or jpg).

I am aware that the file is linked via contentLink and then all the way to contentVersion.

But when I navigate through the fields of contentLink, it doesn’t seem to me there is a field for this purpose.

VersionData field is a link which can be used in workbench but doesn’t seem to be able to directly open that in an url.

ContentUrl fields are empty for all my files in my current org.

How should I achieve this?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here are is native approach documented by salesforce

Use native navigationmixin for file preview.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_open_files

The navigation service opens the preview of one or more files in a modal dialog in Lightning Experience, or triggers a file download in the Salesforce app on mobile devices.

Example in your case it would be as below

<!-- openFileSample.html -->
<template>
 <div>
   <a onclick={navigateToFiles}>Navigate To File</a>
 </div>
</template>

JS Code

// openFileSample.js
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

 export default class OpenFileSample extends NavigationMixin(LightningElement) {

navigateToFiles() {
  this[NavigationMixin.Navigate]({
    type: 'standard__namedPage',
    attributes: {
        pageName: 'filePreview'
    },
    state : {
        selectedRecordId:'contentDocumentId'
     }
   })
  }

}

ContentDocumentId can be obtained by querying ContentVersion Object.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0