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"?>
<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 추가하여 화면 확인
