LWC - How to send the recordId to the controller

Question

I'm trying to pass the recordId to the controller so I can interact with the person account to send the data. The problem I found was that recordId was not sending its data correctly to the controller. So I did console.log recordId and it was giving me an undefined. Any idea of getting recordId?

.js

      @api recordId;

      async connectedCallback() {
        console.log(this.recordId) // this will give me undefined
        uploadImage({
          fileName: 'image.png',
          base64Data: image_data_url,
          recordId: this.recordId,
        })
      }

     photoShot() {
        canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); // draw html5 canvas
        const image_data_url = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "");
     }

.cls

        @AuraEnabled
        public static string uploadImage(String fileName, String base64Data, Id recordId) {
            // Decoding the base64Data
            base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
            ContentVersion cv = new ContentVersion();
            cv.VersionData = EncodingUtil.base64Decode(base64Data);
            cv.Title = fileName;
            cv.PathOnClient = '/' + fileName;
            cv.IsMajorVersion = true;
            cv.FirstPublishLocationId = recordId;
            Insert cv;

            ContentDocumentLink cdl = new ContentDocumentLink();
            cdl.ContentDocumentId = [
                  SELECT ContentDocumentId 
                  FROM ContentVersion 
                  WHERE Id =: cv.Id
                ].ContentDocumentId;
            cdl.LinkedEntityId = recordId;
            cdl.ShareType = 'V';
            cdl.Visibility = 'AllUsers';
            insert cdl;
            System.debug('ContentDocumentLink');
            System.debug(cdl.Id);
        }

.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle 
    xmlns="http://soap.sforce.com/2006/04/metadata">
        <apiVersion>54.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__AppPage</target>
            <target>lightning__RecordPage</target>
            <target>lightning__HomePage</target>
            <target>lightningCommunity__Page</target>
            <target>lightningCommunity__Default</target>
        </targets>
        <targetConfigs>
            <targetConfig targets="lightningCommunity__Default">
                <property
                    name="recordId"
                    type="String"
                    label="Record Id"
                    description="Automatically bind the page's record id to the component variable"
                    default="{!recordId}" />
            </targetConfig>
        </targetConfigs>
    </LightningComponentBundle>

Answer 1

To access the record id you need to add the component to a Lightning record page.
You need to also import the @api like below:

import { LightningElement, api } from 'lwc';

Please note that

"The recordId is set only when you place or invoke the component in an explicit record context. In all other cases, the recordId isn’t set, and your component can’t depend on it."

If your component is added on an Expereince Site then you need to add the following in your meta file:

<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property
            name="recordId"
            type="String"
            label="Record Id"
            description="Automatically bind the page's record id to the component variable"
            default="{!recordId}" />
    </targetConfig>
</targetConfigs>

For your reference please refer to the following Link