+ Start a Discussion
Arpit Jain92Arpit Jain92 

File preview is not working in community with LWC component

Hello Everyone,

I am using an lwc component on which users will upload a file and they can also preview that. For a preview, I am using navigationMixin and navigate the record to standard_namedPage which working fine for internal use but the same method is not working in the community. I am not able to preview the file using that. Today I did some research and get to know standard_namedPage not supported community and for that, I need to use standard_webPage which redirects me to the new tab and I can see my file there but the issue is on that new tab I can see my file as a thumbnail, not the actual file. Can someone guide me on how can I preview files in the community as the original file?
Below is the code that I am using for both internal and external.
 
Internal:
this[NavigationMixin.Navigate]({
type: 'standard__namedPage',
attributes: {
pageName: 'filePreview'
},
state : {
// assigning ContentDocumentId to show the preview of file
selectedRecordId:event.currentTarget.dataset.id
}
})

External:
//Getting content version id to assign the url.
contentVersionId = response;
var baseURL = 'https://'+location.host+'/';
var previewURL = baseURL + 'sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId='+contentVersionId;
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: previewURL
}
}, false );

Thanks,
Arpit Jain
AbhishekAbhishek (Salesforce Developers) 
https://www.sfdcpanther.com/how-to-preview-files-in-lightning-community-using-lwc/

Try the code snippet as mentioned in the above blog.

For further reference check the below,
https://www.sfdcpanther.com/how-to-preview-files-in-lightning-community-https://salesforce.stackexchange.com/questions/261288/lightning-web-components-file-preview-does-not-work-on-mobile-version


I hope it helps.
AlexScharesAlexSchares
I'm stuck with the same issue. I want to preview a file in my community. I followed the mentioned article from sfdcpanther, but it always opens a new tab with a thumbnail. I want it to behave like known from within lightning. It should open this preview overlay on the page. Was anyone already able to achieve this?
Arpit Jain92Arpit Jain92
Still didn't get any update. So, later I use Aura component for that functionality.
Sumit Kumar 10Sumit Kumar 10
Hi @Arpit Jain92,
I am facing this issue in Salesforce site. Preview is not working. Can you help me with that?
Arpit Jain92Arpit Jain92

@SumitKumar10
For LWC I didn't get any solution but for Aura component you can show preview on community.
For You can refer below code:

Component Code:

<aura:iteration items="{!v.SignedGADPackage}" var="item" indexVar="index">
<tr>
<td width="25%">
{!item.docName}
</td>
<td width="25%">
<lightning:formattedDateTime value="{!item.generatedDocTime}" year="numeric"
month="numeric" day="numeric" hour="2-digit" minute="2-digit"
hour12="true" />
</td>
<td width="25%">
{!item.generatedBy}
</td>
<td width="25%">
<a href="" id="{!item.conDocId}" onclick="{!c.previewFile}">View&nbsp;
<lightning:icon size="x-small" iconName="action:preview" alternativeText="Preview"
title="Preview" />
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" id="{!item.conDocId}"
onclick="{!c.downloadFiles}">Download&nbsp;
<lightning:icon size="x-small" iconName="action:download" alternativeText="Download"
title="Download" />
</a>
</td>
</tr>
</aura:iteration>

JS Code:

previewFile: function (component, event, helper) {
var rec_id = event.currentTarget.id;
$A.get('e.lightning:openFiles').fire({
recordIds: [rec_id]
});
},

downloadFiles : function (component, event, helper)
{
var documentId = event.currentTarget.id;
var urlString = window.location.href;
var baseURL = urlString.substring(0, urlString.indexOf("/s"));
var urlEvent = $A.get("e.force:navigateToURL");
urlEvent.setParams({
"url": baseURL + '/sfc/servlet.shepherd/document/download/' + documentId + '?operationContext=S1'
});
urlEvent.fire();
},

Please markit as best answer if this helps you.

Thanks,
Arpit

Arghyadeep SurArghyadeep Sur
Hi @Arpit ,

You can use the following codes for the purpose-

let baseUrl=your portal url+'/s/contentdocument/'+file.ContentDocumentId;
window.open(baseUrl);  //to open in new tab
OR
//to open in same tab
let baseUrl=your portal url+'/s/contentdocument/'+file.ContentDocumentId;
this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: baseUrl
            }
        }, false );

Your portal URL can be found by navigating to Feature Settings-->Digital Experiences-->All Sites.

Please give this a thumbs up if this helps you.

Thanks and regards,
Arghyadeep