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

import { LightningElement, api,track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import LightningPrompt from 'lightning/prompt';
import uploadFile from '@salesforce/apex/FileUploadService.uploadFile'
import { FlowAttributeChangeEvent, FlowNavigationNextEvent } from 'lightning/flowSupport';
export default class creatingCustomPhotoUploader extends LightningElement {
    @api recordId;
    fileData
    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(){
        const {base64, filename, recordId} = this.fileData
        uploadFile({ base64, filename, recordId }).then(result=>{
            this.fileData = null
            let title = `${filename} uploaded successfully!!`
            this.toast(title)
        })
    }

    toast(title){
        const toastEvent = new ShowToastEvent({
            title, 
            variant:"success"
        })
        this.dispatchEvent(toastEvent)
    }
    notify()
    {   
        //Ask question using Prompt
        this.template.querySelector('c-common-notification').notify('prompt', 'What is your Email?','header','Notification','info');
   }


   @api notificationType;
   @api message;
   @api variant;
   @api header;
   @api colorTheme;
   @api value;
   @api isCallerFlow=false;
   @api autoCloseTime = 5000;
   @track showToastBar=false;
   connectedCallback()
   {
       //If Flow then show modal when screen is shown
       if(this.isCallerFlow==true)
       {
           this.showNotification();
       }
   }
   showNotification()
   {
       if(this.notificationType=='Confirm')
       {
           this.handleConfirm();
       }
       else if(this.notificationType=='Prompt')
       {
           this.handlePrompt();
       }
       else if(this.notificationType=='Alert')
       {
           this.handleAlert();
       }
       else if(this.notificationType=='Toast')
       {
           this.handleToast();
       }
   }

   @api
   notify(type, message,variant,header,theme) {
       this.notificationType = type;
       this.message = message;
       this.variant=variant;
       this.header=header;
       this.colorTheme = theme;
       this.showNotification();
   }
 
   handlePrompt(){
       LightningPrompt.open({ 
               message: this.message,
               theme: this.colorTheme, 
               label: this.header, 
               variant: this.variant,
               defaultValue: '', 
       }).then((result) => {
           this.value=result;
           const selectedEvent = new CustomEvent('selection', { detail: result });
           // Dispatches the event
           this.dispatchEvent(selectedEvent);
   
           if(this.isCallerFlow==true)
           {
               const attributeChangeEvent = new FlowAttributeChangeEvent(
                   'value',result);
               this.dispatchEvent(attributeChangeEvent);
               
               var navigationEvent = new FlowNavigationNextEvent();
               this.dispatchEvent(navigationEvent);
           }
       });
   }

  

   //Toast Section
   closeModel() {
       this.showToastBar = false;
       if(this.isCallerFlow==true)
       {
           var navigationEvent = new FlowNavigationNextEvent();
           this.dispatchEvent(navigationEvent);
       }
   }

   get getIconName() {
       return 'utility:' + this.colorTheme;
   }

   get innerClass() {
       return 'slds-icon_container slds-icon-utility-' + this.colorTheme + ' slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top';
   }

   get outerClass() {
       return 'slds-notify slds-notify_toast slds-theme_' + this.colorTheme;
   }

   handleToast(){
       var that=this;
       that.showToastBar = true;
       setTimeout(() => {
           that.closeModel();
       }, that.autoCloseTime);
   }
}