Picture Uploader

//Apex Controller
public with sharing class LWC_Methods {

    @AuraEnabled(Cacheable=true)
    public static String getPhotoId(String recordId) {

        List<Id> contentids = new List<Id>();
        for (ContentDocumentLink cdl : [
                SELECT Id,ContentDocumentId
                FROM ContentDocumentLink
                WHERE LinkedEntityId = :recordId])
        {
                    contentids.add(cdl.ContentDocumentId);
        }
        if (contentids.size() > 0) {
            List<ContentVersion> cvs = [
                    SELECT
                            Id,
                            Title,
                            ContentDocumentId,
                            FileType,
                            ContentSize,
                            FileExtension,
                            VersionNumber,
                            CreatedDate,
                            Contact_Photo_2_fileupload__c,
                            FirstPublishLocationId
                    FROM ContentVersion
                    WHERE ContentDocumentId IN :contentids
                    And Contact_Photo_2_fileupload__c = 'yes'
                    ORDER BY CreatedDate DESC
            ];
            if (cvs.size() > 0) {
                return cvs[0].Id;
            }
        }
        return null;
    }
}

<!-- Picture Upload Template -->
<template>

    <template if:false={hasPicture}>
        <lightning-file-upload
                label="Attach Photo"
                name="fileUploader"
                file-field-name="Contact_Photo_2_fileupload__c"
                file-field-value={isphoto}
                accept={acceptedFormats}
                record-id={recordId}
                onuploadfinished={handleUploadFinished}
                multiple
        >
        </lightning-file-upload>
    </template>


    <template if:true={hasPicture}>
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size="12">
                <img src={imgsrc} />
            </lightning-layout-item>

            <lightning-layout-item class="slds-m-top_medium"  size="12">
                <lightning-button label="Change Photo" onclick={changePhoto}></lightning-button>
            </lightning-layout-item>

        </lightning-layout>
    </template>

</template>

//Controller
import {api, LightningElement, wire} from 'lwc';
import getPhotoId from '@salesforce/apex/LWC_Methods.getPhotoId';

export default class CapPictureUpload extends LightningElement {
    @api recordId;
    versionId;
    hasPicture = false;
    isphoto = 'yes';

        @wire (getPhotoId, {recordId: '$recordId'} )
            wiredPhoto({ error, data }) {
                if (data) {
                    this.versionId = data;
                    this.hasPicture = true;
                } else if (error) {
                    this.versionId = '';
                    this.hasPicture = false;
                }
            }

    changePhoto() {
        this.versionId = '';
        this.hasPicture = false;
    }

    get acceptedFormats() {
        return ['.pdf', '.png', '.jpg'];
    }

    handleUploadFinished(event) {
        // Get the list of uploaded files
        let uploadedFiles = event.detail.files;
        let newvalue = '';
        uploadedFiles.forEach(value =>  {
            newvalue = value.contentVersionId;
        });
        if (newvalue) {
            this.versionId = newvalue;
            this.hasPicture = true;
        }
    }

    get imgsrc() {
        if (this.versionId) {
            return '/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=' + this.versionId;
        }
        return '';
    }
}


//MetaData
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <description>Picture Upload</description>
    <isExposed>true</isExposed>
    <masterLabel>Picture Upload</masterLabel>

    <targets>
        <target>lightning__RecordPage</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>

</LightningComponentBundle>