1

.js file

import { LightningElement, wire, track } from 'lwc';

// importing Apex class method
import retriveFiles from '@salesforce/apex/LWCExampleController.retriveFiles';

// importing navigation service
import { NavigationMixin } from 'lightning/navigation';

// extends the class to 'NavigationMixin'
export default class FilePrivewInLWC extends NavigationMixin(LightningElement) {
    // reactive variables
    @track files;

    // Reteriving the files to preview
    @wire(retriveFiles)
    filesData({data, error}) {
        if(data) {
            window.console.log('data ===> '+data);
            this.files = data;
        }
        else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }
    }

    // when you click the preview button this method will call and
    // it will show the preview of the file based on ContentDocumentId
    filePreview(event) {
        // Naviagation Service to the show preview
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'filePreview'
            },
            state : {
                // assigning ContentDocumentId to show the preview of file
                selectedRecordId:event.currentTarget.dataset.id
            }
          })
    }
}

.html file

<template>
    <lightning-card title="File Preview In Lightning Web Component">
        <template if:true={files}>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div title="Key">File Name</div>
                        </th>
                        <th scope="col">
                            <div title="Value">File Extension</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={files} for:item="keyValue">
                        <tr key={keyValue.Id}>
                            <th scope="col">
                                <div>{keyValue.Title}</div>
                            </th>
                            <th scope="col">
                                <div>{keyValue.FileExtension}</div>
                            </th>
                            <th scope="col">    
                                <!-- Using Dataset Property to get ContentDocumentId -->
                                <lightning-button data-id={keyValue.ContentDocumentId} 
                                                  label="Preview" 
                                                  variant="brand" 
                                                  value="file preview" 
                                                  onclick={filePreview}></lightning-button>
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
    </lightning-card>
</template>

1 Answer 1

1

Just use an img tag and pass the ContentDocument to that.

It looks like you are querying to the ContentVersion records so it's good. Form the URL like below and put that into a list.

item.url = '/sfc/servlet.shepherd/version/download/' + contentVersion.Id;

So the wire method will be like this.

@wire(retriveFiles)
filesData({data, error}) {
    if(data) {
        window.console.log('data ===> '+data);
        this.files = data.map( image => {
             ...image,
             url: '/sfc/servlet.shepherd/version/download/' + image .Id
        });
    }
    else if(error) {
        window.console.log('error ===> '+JSON.stringify(error));
    }
}

Do this in the HTML.

<template for:each={files} for:item="keyValue">
    <tr key={keyValue.Id}>
        <th scope="col">
            <div>{keyValue.Title}</div>
        </th>
        <th scope="col">
            <div>{keyValue.FileExtension}</div>
        </th>
        <th scope="col">    
            <img src={keyValue.url}/>
        </th>
    </tr>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.