ContentDocument Preview in LWC in Communities. Is there a ConnectApi.ContentHub.getFilePreview Equivalent?

Question

I'm trying to create a custom version of the File Preview Modal that appears in Lex when using this approach: Using Navigation Mixin with a page name of 'filePreview'. That approach doesn't work in communities, and while I know I could do it the Aura way, I'm also looking to add some customization to add previews for additional file types. In order to do that, I'm looking to get the generated SVGs of the PDFs that that file preview modal relies on.

In my search of how I could do this, it brought me to ConnectApi.ContentHub.getFilePreview. This would be perfect, HOWEVER it only works for Files Connect files, instead of internal ContentDocuments. Is there an equivalent way to retrieve preview information for internal ContentDocuments?

Alternatively, my last approach would just be copying the URL format of the existing File Preview modal. Something like this: sfc/servlet.shepherd/version/renditionDownload?rendition=SVGZ&versionId={versionId}&operationContext=CHATTER&contentId={contentId}&page=0 but there are two major downsides to this:

1. I'm not sure of how I can easily tell how many pages are in a PDF
2. It feels fragile and like it could break in a future release

Answer 1

Unfortunately, I'm not aware of any standard approach, but as you said in the last paragraph - there is a way to create a custom file preview component, which reuses URLs from standard File Preview modals. It is fragile but I couldn't figure out anything better.

To support paging, you could use <img> HTML element with onload and onerror events.

Just like in the example:

<!-- filePreview.html -->
<template>
    <template for:each={imgUrls} for:item="imgUrl">
        <img key={imgUrl} src={imgUrl} onerror={handleImgLoadError} onload={handleImgLoadSuccess}>
    </template>
</template>

// filePreview.js
import { LightningElement, api, track } from 'lwc';

export default class FilePreview extends LightningElement {
    @api contentVersionId;
    @api contentDocumentId;

    // List of all potential img urls
    @track imgUrls = [];

    // Page num used for tracking pages
    pageNum = 0;
    
    // Idicator when loading should be finished, because of failure
    loadFailed = false;

    connectedCallback() {
        // Try to generate url for the first page and add it to imgUrls list for rendering
        this.generateImgUrl();
    }

    handleImgLoadError(event) {
        // When onerror event is triggered on img element, then mark it and don't generate any new img urls
        this.loadFailed = true;
    }

    handleImgLoadSuccess(event) {
        // When onload event is triggered on img element, then increase pageNum and try to render one more img
        this.pageNum++;
        this.generateImgUrl();
    }

    generateImgUrl() {
        let previewUrl = '/sfc/servlet.shepherd/version/renditionDownload';
        previewUrl += `?rendition=$SVGZ`;
        previewUrl += `&versionId=${this.contentVersionId}`;
        previewUrl += `&contentId=${this.contentDocumentId}`;
        previewUrl += `&page=${this.pageNum}`

        this.imgUrls.push(previewUrl);
    }
}