How To Preview and Download Files Using LWC?

How To Preview and Download Files Using LWC?


In this blog, you will learn how you can preview and download files from salesforce using lightning web component.

Source Code

LWC.html

<template>
    <lightning-card title="File Preview and Download" icon-name="standard:file">
        <template for:each={filesList} for:item="file">
            <div key={file.value} class="slds-box">
                <div class="slds-grid slds-wrap">
                    <div class="slds-col slds-large-size_6-of-12 slds-medium-size_6-of-12 slds-size_12-of-12">
                      <p><strong>Filename - </strong>{file.label}</p>
                    </div>
                    <div class="slds-col slds-large-size_6-of-12 slds-medium-size_6-of-12 slds-size_12-of-12">
                        <div class="slds-button-group" role="group">
                             <lightning-button label="Preview" variant="neutral" data-id={file.value} onclick={previewHandler}
                            ></lightning-button>
                            <a href={file.url} class="slds-button slds-button_neutral" download>Download</a>
                          </div>                    
                    </div>
                  </div>
            </div>
        </template>
   </lightning-card>
</template>


LWC.JS

import { LightningElement, api, wire } from 'lwc';
import getRelatedFilesByRecordId from '@salesforce/apex/FileController.getRelatedFilesByRecordId'
import {NavigationMixin} from 'lightning/navigation'

export default class FileDownloadPreview extends NavigationMixin(LightningElement) {

    @api recordId;
    filesList =[];
    @wire(getRelatedFilesByRecordId, {recordId: '$recordId'})
    wiredResult({data, error}){
        if(data){
            this.filesList = Object.keys(data).map(item=>({"label":data[item],
             "value": item,
             "url":'/sfc/servlet.shepherd/document/download/'+ item
            }))
        }
        if(error){
            console.log(error);
        }
    }
    previewHandler(event){
        this[NavigationMixin.Navigate]({
            type:'standard__namedPage',
            attributes:{
                pageName:'filePreview'
            },
            state:{
                selectedRecordId: event.target.dataset.id
            }
        })
    }
}


LWC.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>


FileController.cls

public with sharing class FileController {
    @AuraEnabled(cacheable=true)
    public static Map<ID, String> getRelatedFilesByRecordId(String recordId) {      
        List<ContentDocumentLink> files = [SELECT ContentDocumentId FROM ContentDocumentLink WHERE LinkedEntityId = :recordId];
        List<ID> fileIDs = new List<ID>();
        for (ContentDocumentLink docLink : files) {
            fileIDs.add(docLink.ContentDocumentId);
        }
        List<ContentVersion> docs = [SELECT ContentDocumentId, FileExtension, Title FROM ContentVersion WHERE ContentDocumentId IN : fileIDs];
        Map<ID, String> mapIdTitle = new Map<ID, String>();
        for (ContentVersion docLink : docs) {
            mapIdTitle.put(docLink.ContentDocumentId, docLink.Title);
        }
        return mapIdTitle;
    }
}


Demo


Follow Us

Posted By : Sudeer Kamat Date :

view_module Related

  • How To Create News App Using LWC And Apex REST API?How To Create News App Using LWC And Apex REST API?
  • How To Create Product Lightning Card UI Design Using LWC?How To Create Product Lightning Card UI Design Using LWC?
  • How to Create Netflix Card Animation Effect In LWC?How to Create Netflix Card Animation Effect In LWC?
  • How To Integrate YouTube API Using LWC In Salesforce?How To Integrate YouTube API Using LWC In Salesforce?
  • How To Integrate Github Using Fetch API In LWC?How To Integrate Github Using Fetch API In LWC?

Comments 0