You need to sign in to do that
Don't have an account?
Prasanth R
lwc fileupload in record creation
i created a record by usig LWC and uploaded the file.But In UI it's not displaying the file for the corresponding record..kindly someone help me.
below i added the code:
<template>
<lightning-button class="button" variant="brand" label="Gas station"
title="Gas Station" onclick={showModalBox}>
</lightning-button>
<!-- modal start -->
<template if:true={isShowModal}>
<!--
I Used SLDS for this code
Here is link https://www.lightningdesignsystem.com/components/modals/
-->
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate" style="background-color: rgb(218, 8, 116);">New Gas station</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_large" id="modal-content-id-1">
<lightning-card>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2" style="width: 300px;">
<span>
<lightning-input label="Firm Name" name="Firm_Name__c" type="text" value={formFields.Firm_Name__c} onchange={changeHandler}></lightning-input>
<lightning-input label="owner Name" name="Owner_Name__c" type="text" value={formFields.Owner_Name__c} onchange={changeHandler}></lightning-input>
<lightning-input label="Phone Number" name="Phone_No__c" type="text" value={formFields.Phone_No__c} onchange={changeHandler}></lightning-input>
<lightning-card title="Partnership details" >
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
<lightning-card title="Gst details" >
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
</span>
</div>
<div class="slds-col slds-size_2-of-2" style="width: 300px;">
<lightning-input label="Email Id" name="Email_Id__c" type="text" value={formFields.Email_Id__c} onchange={changeHandler}></lightning-input>
<lightning-input label="Pan No" name="Pan_Number__c" type="text" value={formFields.Pan_Number__c} onchange={changeHandler}></lightning-input>
<lightning-input label="Gst No" name="Gst_Number__c" type="text" value={formFields.Gst_Number__c} onchange={changeHandler}></lightning-input>
<lightning-card title="Pan card details" >
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
</div>
</div>
</lightning-card>
<lightning-button label="Submit" variant="brand" onclick={handleSave} ></lightning-button>
<lightning-button label="Cancel" variant="brand" onclick={handleCancel} ></lightning-button>
</div>
<!-- modal footer start-->
<!-- <footer class="slds-modal__footer"> -->
<!-- <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button> -->
<!-- <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Submit</button> -->
<!-- </footer> -->
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
<!-- modal end -->
</template>
js:
js:
import { LightningElement,track,api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import { createRecord } from 'lightning/uiRecordApi';
import INNAD_GASSTATION_OBJECT from '@salesforce/schema/INNAD_Gas_Station__c';
import OWNER_NAME_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Owner_Name__c';
import PHONE_NO_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Phone_No__c';
import EMAIL_ID_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Email_Id__c';
import PAN_NO_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Pan_Number__c';
export default class GasStation extends LightningElement {
formFields = {
Firm_Name__c:'',
Owner_Name__c:'',
Phone_No__c:'',
Email_Id__c:'',
Pan_Number__c:'',
Gst_Number__c:''
}
changeHandler(event){
const {value, name} = event.target
this.formFields = { ...this.formFields, [name]:value}
}
handleSave(){
const fields ={}
fields[OWNER_NAME_FIELD.fieldApiName] = this.formFields.Owner_Name__c
console.log(this.formFields.Owner_Name__c)
fields[PHONE_NO_FIELD.fieldApiName] = this.formFields.Phone_No__c
console.log(this.formFields.Owner_Name__c)
fields[EMAIL_ID_FIELD.fieldApiName] = this.formFields.Email_Id__c
console.log(this.formFields.Owner_Name__c)
fields[PAN_NO_FIELD.fieldApiName] = this.formFields.Pan_Number__c
console.log(this.formFields.Owner_Name__c)
let recordInput = { apiName: INNAD_GASSTATION_OBJECT.objectApiName, fields}
createRecord(recordInput).then(result=>{
this.formFields={}
console.log('Record created ID', JSON.stringify(result.id))
}).catch(error=>{
console.error(error)
})
}
@track isShowModal = false;
showModalBox() {
this.isShowModal = true;
}
hideModalBox() {
this.isShowModal = false;
}
handleCancel() {
this.isShowModal = false;
}
@api recordId;
get acceptedFormats() {
return ['.pdf', '.png','.jpg','.jpeg'];
}
handleUploadFinished(event) {
// Get the list of uploaded files
const uploadedFiles = event.detail.files;
let uploadedFileNames = '';
for(let i = 0; i < uploadedFiles.length; i++) {
uploadedFileNames += uploadedFiles[i].name + ', ';
}
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames,
variant: 'success',
}),
);
}
}
<?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__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
below i added the code:
<template>
<lightning-button class="button" variant="brand" label="Gas station"
title="Gas Station" onclick={showModalBox}>
</lightning-button>
<!-- modal start -->
<template if:true={isShowModal}>
<!--
I Used SLDS for this code
Here is link https://www.lightningdesignsystem.com/components/modals/
-->
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate" style="background-color: rgb(218, 8, 116);">New Gas station</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_large" id="modal-content-id-1">
<lightning-card>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2" style="width: 300px;">
<span>
<lightning-input label="Firm Name" name="Firm_Name__c" type="text" value={formFields.Firm_Name__c} onchange={changeHandler}></lightning-input>
<lightning-input label="owner Name" name="Owner_Name__c" type="text" value={formFields.Owner_Name__c} onchange={changeHandler}></lightning-input>
<lightning-input label="Phone Number" name="Phone_No__c" type="text" value={formFields.Phone_No__c} onchange={changeHandler}></lightning-input>
<lightning-card title="Partnership details" >
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
<lightning-card title="Gst details" >
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
</span>
</div>
<div class="slds-col slds-size_2-of-2" style="width: 300px;">
<lightning-input label="Email Id" name="Email_Id__c" type="text" value={formFields.Email_Id__c} onchange={changeHandler}></lightning-input>
<lightning-input label="Pan No" name="Pan_Number__c" type="text" value={formFields.Pan_Number__c} onchange={changeHandler}></lightning-input>
<lightning-input label="Gst No" name="Gst_Number__c" type="text" value={formFields.Gst_Number__c} onchange={changeHandler}></lightning-input>
<lightning-card title="Pan card details" >
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
</div>
</div>
</lightning-card>
<lightning-button label="Submit" variant="brand" onclick={handleSave} ></lightning-button>
<lightning-button label="Cancel" variant="brand" onclick={handleCancel} ></lightning-button>
</div>
<!-- modal footer start-->
<!-- <footer class="slds-modal__footer"> -->
<!-- <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button> -->
<!-- <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Submit</button> -->
<!-- </footer> -->
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
<!-- modal end -->
</template>
js:
js:
import { LightningElement,track,api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import { createRecord } from 'lightning/uiRecordApi';
import INNAD_GASSTATION_OBJECT from '@salesforce/schema/INNAD_Gas_Station__c';
import OWNER_NAME_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Owner_Name__c';
import PHONE_NO_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Phone_No__c';
import EMAIL_ID_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Email_Id__c';
import PAN_NO_FIELD from '@salesforce/schema/INNAD_Gas_Station__c.Pan_Number__c';
export default class GasStation extends LightningElement {
formFields = {
Firm_Name__c:'',
Owner_Name__c:'',
Phone_No__c:'',
Email_Id__c:'',
Pan_Number__c:'',
Gst_Number__c:''
}
changeHandler(event){
const {value, name} = event.target
this.formFields = { ...this.formFields, [name]:value}
}
handleSave(){
const fields ={}
fields[OWNER_NAME_FIELD.fieldApiName] = this.formFields.Owner_Name__c
console.log(this.formFields.Owner_Name__c)
fields[PHONE_NO_FIELD.fieldApiName] = this.formFields.Phone_No__c
console.log(this.formFields.Owner_Name__c)
fields[EMAIL_ID_FIELD.fieldApiName] = this.formFields.Email_Id__c
console.log(this.formFields.Owner_Name__c)
fields[PAN_NO_FIELD.fieldApiName] = this.formFields.Pan_Number__c
console.log(this.formFields.Owner_Name__c)
let recordInput = { apiName: INNAD_GASSTATION_OBJECT.objectApiName, fields}
createRecord(recordInput).then(result=>{
this.formFields={}
console.log('Record created ID', JSON.stringify(result.id))
}).catch(error=>{
console.error(error)
})
}
@track isShowModal = false;
showModalBox() {
this.isShowModal = true;
}
hideModalBox() {
this.isShowModal = false;
}
handleCancel() {
this.isShowModal = false;
}
@api recordId;
get acceptedFormats() {
return ['.pdf', '.png','.jpg','.jpeg'];
}
handleUploadFinished(event) {
// Get the list of uploaded files
const uploadedFiles = event.detail.files;
let uploadedFileNames = '';
for(let i = 0; i < uploadedFiles.length; i++) {
uploadedFileNames += uploadedFiles[i].name + ', ';
}
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames,
variant: 'success',
}),
);
}
}
<?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__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>