Apex Code Development You need to sign in to do that
Don't have an account?
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
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
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.
I am facing this issue in Salesforce site. Preview is not working. Can you help me with that?
@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
<lightning:icon size="x-small" iconName="action:preview" alternativeText="Preview"
title="Preview" />
</a>
<a href="javascript:void(0)" id="{!item.conDocId}"
onclick="{!c.downloadFiles}">Download
<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
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
I build one community site .I was showing file priview by your approach.It was working fine for 'Internal' users.But priview was giving error for community license users.
Below workaround worked for me
1) Write one trigger on contentVersion .In 'After insert ' trigger ,Create corresponding record in 'ContentDistribution' object,
2) PdfDownloadUrl and DistributionPublicUrl fields on contentDistribution gets populated automatically.
3) Query this object and show file preview using this links.
Thanks