My_Test_Repo/force-app/main/default/lwc/createCustomPhotoUploader/createCustomPhotoUploader.js

import { LightningElement,api,track,wire} from 'lwc';
import uploadFile from '@salesforce/apex/FileUploadService.uploadFile';
import deletefile from '@salesforce/apex/FileUploadService.deletefile';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';  
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

// Import the reference to the fields that you wish to display
import ProfileUrl__c_FIELD from '@salesforce/schema/Friend__c.ProfileUrl__c';

export default class CreateCustomPhotoUploader extends LightningElement {

    fields = [ProfileUrl__c_FIELD];
    uploadPhotoPrompt = false;
    showPhotoPrompt=false;
    deletePhotoPrompt=false;
    Contentv;
    @api recordId;
    fileData;
    imageUrl;
    spinner=false;
    isphoto=false;
     
    @wire(getRecord, { recordId: '$recordId', fields: [ProfileUrl__c_FIELD] })
    wiredRecord({ error, data }) {
        if (data) {
            this.imageUrl = getFieldValue(data, ProfileUrl__c_FIELD);
        } else if (error) {
            console.error('Error getting record', error);
        }
    }
    renderedCallback() {
      console.log('Img url:',this.imageUrl);
      if(this.imageUrl!=null){
        let url = new URL(this.imageUrl);
        let params = new URLSearchParams(url.search);
        this.Contentv= params.get('versionId');
        console.log('@@@ Content iddddd',this.Contentv);
      } 
        
    }
    UploadFilechange(event) {
        const file = event.target.files[0];
        const fileType = file.type;
        const acceptedFormats = ['image/png', 'image/jpeg'];
        if (!acceptedFormats.includes(fileType)) {
            // Show an error message and return
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Invalid file type. Please upload a .png or .jpeg file.',
                    variant: 'error',
                }),
            );
            return;
        
        }
        var reader = new FileReader();
        reader.onload = () => {
            var base64 = reader.result.split(',')[1];
            this.fileData = {
                'filename': file.name,
                'base64': base64,
                'recordId': this.recordId
            }
            console.log(this.fileData);
        }
        reader.readAsDataURL(file);
    }
    
    handleClick(){
        if(this.fileData==null){
            console.log('inside click if');
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Please Choose Photo!',
                    variant: 'error',
                }),
            );
        }else if(this.fileData != null){
            this.spinner = true;
            console.log('inside else');
            const {base64, filename, recordId} = this.fileData;
            uploadFile({ base64, filename, recordId })
            .then(result=>{
               if(result){
                this.imageUrl = result;
                // window.localStorage.setItem('imageUrl', this.imageUrl)
                this.isphoto=true;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title:`${filename} uploaded successfully!!`,
                        variant: 'success',
                    }),
                );
                console.log('image url:',this.imageUrl);
                let url = new URL(this.imageUrl);
                let params = new URLSearchParams(url.search);
                this.Contentv= params.get('versionId');
                console.log('@@@ Content iddddd',this.Contentv);
                // Hide the spinner after 2.5 seconds
                setTimeout(() => {
                    this.spinner = false;
                }, 2500);
                this.fileData = null
                this.hidePrompt();
               }else if(error){
                console.log(error);
               }    
            })
        }
    }
    
    removeReceiptImage(){
        this.fileData=null;
    }

    showPrompt() {
        this.uploadPhotoPrompt = true;
    }
    hidePrompt() {
        this.uploadPhotoPrompt = false;
        this.showPhotoPrompt= false;
        this.fileData=null;
        this.deletePhotoPrompt=false;

    }
    showPhoto() {
        this.showPhotoPrompt=true;
    
    }
    uploadPhoto() {
        
        this.uploadPhotoPrompt=true;
    }
    deletePhoto(){
        this.deletePhotoPrompt=true;
    }

    handleDelete(){
        deletefile({Contentv: this.Contentv,recordid:this.recordId})
        .then(result=>{
            if(result){
            this.dispatchEvent(
                new ShowToastEvent({
                    title:result,
                    variant: 'success',
                }),
            );
            setTimeout(() => {
                this.spinner = false;
            }, 2500);
            this.isphoto=false;
            this.hidePrompt();
           }   

        })
       }
      
    }