Preview ContentDocument Image in Lightning Web Component in a Lightning Community

Question

I need to have the ability to preview a ContentDocument image in a lightning web component. Apparently lightning:fileCard is not available for LWC yet and the navigation mixin solution appears to not work if your lightning component is in a lightning community. There is also no thumbnail preview when you upload the document. Any ideas on a good work around for this? Any idea when/if this feature will be available? I'm currently creating a custom app for a client so I need to be able to say that it either isn't possible or there's a relatively easy way to implement it.

Answer 1

The NavigationMixin solution should work as well, with minor modification. According to this blog post, rather than using NavigationMixin.Navigate with type argument standard__namedPage and ContentDocumentId, you should be using standard__webPage along with the file URL.

    previewFile(file){
        
        if(!this.usedInCommunity){
            
            this[NavigationMixin.Navigate]({
                type: 'standard__namedPage',
                attributes: {
                    pageName: 'filePreview'
                },
                state : {
                    selectedRecordId: file.ContentDocumentId
                }
            });
        } else if(this.usedInCommunity){
            
            this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: file.fileUrl
                }
            }, false );
        }
        
    }