function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Prasanth RPrasanth R 

lwc file upload in related record

i created a record by usig LWC and uploaded the file.But In UI it's not displaying the file for the corresponding record.Kidl 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>
            &nbsp; &nbsp;
            <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>

User-added image
User-added image
AnkaiahAnkaiah (Salesforce Developers) 
Hi Prasanth,

Refer the below link will help you to proceed further.

https://www.sfdcpoint.com/salesforce/file-upload-in-lightning-web-component/

Thanks!!
Prasanth RPrasanth R
i follwed that code.it's not working