[LWC] 노트 및 첨부파일에 등록한 이미지파일 미리보기로 보여주기 ( How to show image file preview )

 

0. 실습 상황

• 제품 레코드에 관련 목록 [ 노트 및 첨부파일 ] 에 이미지 파일 등록
• 해당 이미지 파일을 LWC 컴포넌트를 통해 미리보기로 보여주기
• 파라미터로 전달되는 Id 값은 파일 등록한 제품 레코드 Id 값

 

1. apex 파일

 

public with sharing class ProductImageController {

 

    @AuraEnabled

    public static List<ContentVersion> releatedFiles(Id idParent) {

        List<Id> lstConDocs = new List<Id>();

        for (ContentDocumentLink cntLink : [SELECT Id, ContentDocumentId

                                                                  FROM ContentDocumentLink

                                                                 WHERE LinkedEntityId = :idParent]) {

            lstConDocs.add(cntLink.ContentDocumentId);

        }

       

        if (!lstConDocs.isEmpty()) {

            return [SELECT Id, Title, ContentDocumentId, VersionData

                      FROM ContentVersion

                      WHERE ContentDocumentId

                      IN :lstConDocs];

        } else {

            return null;

        }

    }

}

 

2. LWC - js파일

 

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

import releatedFiles from '@salesforce/apex/ProductImageController.releatedFiles';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ProductImage extends LightningElement {

    @api recordId;

    @track files = [];  // 파일 목록을 저장할 배열

    connectedCallback() {

        this.getRelatedFiles();

    }

    getRelatedFiles() {

        releatedFiles({ idParent: this.recordId })

            .then(data => {

                if (data) {

                    this.files = data.map(file => ({

                        id: file.Id,

                        title: file.Title,

                        imageUrl: `/sfc/servlet.shepherd/version/download/${file.Id}`  // 파일의 다운로드 URL

                    }));

                } else {

                    this.files = [];

                }

            })

            .catch(error => {

                this.dispatchEvent(

                    new ShowToastEvent({

                        title: 'Error!!',

                        message: error.message,

                        variant: 'error',

                    }),

                );

            });

    }

}

 

 

3. LWC - html 파일

 

<template>

    <div class="file-preview-container">

        <template if:true={files}>

            <template for:each={files} for:item="file">

                <div key={file.id} class="file-preview">

                    <p>{file.title}</p>

                    <img src={file.imageUrl} alt="File Preview" style="max-width: 300px; height: auto;" />

                </div>

            </template>

        </template>

        <template if:false={files}>

            <p>No related files found</p>

        </template>

    </div>

</template>

 

 

4. lwc - xml 파일

 

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="CustomFileUploader">

    <apiVersion>61.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

 

 

 

 

5. 결과 확인

• 구성완료 후 제품 레코드페이지에 구성요소로 ProductImage.cmp 추가하여 화면 확인