You need to sign in to do that
Don't have an account?
File Upload and Preview in LWC.
Hello Guys,
I need a LWC component which will show(Preview) Uploaded File/Image. Following component is working,But its not previewing the img/file and after refreshing the page file/image is disappearing.
I dont need Preview button,but expecting 5cm X 5cm preview after uploading.
Please help me.
hunterFileUpload.html
<template>
<lightning-card title="Hunter Offline responce excel file">
<div class="slds-p-horizontal_x-small" >
<lightning-layout>
<lightning-layout-item size="6">
<div class="slds-p-left_medium">
<lightning-file-upload
label="Attach Files"
name="uploadFile"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished} multiple>
</lightning-file-upload>
</div>
</lightning-layout-item>
<lightning-layout-item size="6">
<div class="slds-p-left_medium">
Uploaded Files: <br/>
<template for:each={lstAllFiles} for:item="fileIterator">
<div key={fileIterator} style="margin-top:10px;">
<lightning-icon icon-name="doctype:image" size="small" title="Image"></lightning-icon>
{fileIterator}
</div>
</template>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-card>
</template>
hunterFileUpload.js
import { LightningElement,track,api } from 'lwc';
export default class HunterFileUpload extends LightningElement {
@track lstAllFiles = [];
@api recordId;
get acceptedFormats() {
return ['.pdf', '.jpg'];
}
handleUploadFinished(event) {
// Get the list of uploaded files
const lstUploadedFiles = event.detail.files;
lstUploadedFiles.forEach(fileIterator => this.lstAllFiles.push(fileIterator.name));
}
}
hunterFileUpload.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
<targetConfig targets="lightningCommunity__Default">
<property name="recordId" type="String" ></property>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Thanks.
Please check out the implementation over below link:
https://live.playg.app/play/file-uploader-with-view-lwc
You might be able to achieve your particular requirement with few modifications with it.
Hope above information helps. Please mark as Best Answer so that it can help others in future.
Thanks.
Akshay Mhetre,
You can use <lightning-input> instead of <lightning-file-upload>