How to view the content Document in Lightning Community

Question

I have an option to Upload the document in the community Portal.

 <lightning-input type="file" onchange={handleFileChange} name="uploadFile" multiple label="Attachment">
              </lightning-input>

@api
    async handleFileChange(event) {
 this.attachmentArray = await Promise.all(
            [...event.target.files].map(file => this.readFile(file))
        );
        console.log("attachmentArray -->" + JSON.stringify(this.attachmentArray));
        var myJSON = JSON.stringify(this.attachmentArray);
        console.log("myJSON -->" + myJSON);
        addAttachment({
            timebillingId: this.timesheetBillingId,
            strBase64: myJSON,
            loggedinUserId: this.recordId,
        }).then((result) => { 
........
........

Apex Class

ContentVersion cv = new ContentVersion();
cv.VersionData = EncodingUtil.base64Decode(w.base64);
cv.Title = documentName;
cv.PathOnClient = documentName;              
cverList.add(cv);
insert cverList;   

   list<contentversion> cvlist;
            if(  
                contentversion.SObjectType.getDescribe().isAccessible()){
                    cvlist = [select id, contentdocumentid, Title from contentversion where Id IN:cverList];
                }

Note: From this point i can able to get the content document Id.

Attached document are Listing in the data table and On clicking of the attached document i need to preview the attachment.

Trying to frame the Content document as below

String fullFileURL = URL.getSalesforceBaseUrl().toExternalForm();
fullFileURL  = fullFileURL + '/lightning/r/ContentDocument/'+ cdt.ContentDocumentId +'/view';

The above URL is redirecting to below Page, Can anyone help Anything I am missing here.

Thanks for the help

Answer 1

You need to fix the file URL and construct it as follows to get the file preview:
https://your-community-domain-url/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=<ContentVersionId>

Then use NavigationMixin with standard__webPage to redirect to the file URL.

This answer provides some additional info with link to this blog post for sample code.

This is to work around the fact that LWC open files preview using standard__namedPage is not supported for Communities / Experience Cloud sites.

Note that you might want to check lightning-file-upload solution instead of using lightning-input for file upload.

PS: there is an Aura component lightning:fileCard which allows to preview a file simply by providing the ContentDocumentId but this is not available (yet) for LWC, refer to IdeaExchange.