Pass record ID to custom LWC Component and Modal Flow Screen

Question

I am using lightning and I have a custom action button on the standard Account Detail screen. When the button is clicked, it opens up a Flow Screen which I have my custom Lightning Web Component (LWC). I can't seem to pass the record Id into the LWC. I can display the record Id on a flow screen as shown in my image, but can't seem to get it into the custom LWC component that is on the flow screen.

The custom component displays a file upload screen and I need the Salesforce Record ID of the Account available. I think the problem is I don't know how to pass the Id between the Flow Screen and the Custom LWC component that is embedded on the flow screen if that's even possible?

import { LightningElement, track, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class LwcCSVUploader extends LightningElement {

   @api recordId;
   @track fileName = '';
   selectedRecords;
   filesUploaded = [];
   file;
   fileContents;
   fileReader;

   handleSave() {
     // does not display the account record ID which is my goal
     window.console.log(this.recordId);
   }

   handleFilesChange(event) {

     if(event.target.files.length > 0) {
      this.filesUploaded = event.target.files;
      this.fileName = event.target.files[0].name;
     }

   }

}

HTML file in the LWC:

<template>
 <lightning-card title="File Upload">
 <div>
   <lightning-input label="" name="fileuploader" onchange={handleFilesChange} type="file"></lightning-input>
</div>
 <div>
   <lightning-button variant="brand" label="Upload" title="Upload CSV Data"  onclick={handleSave}> 
   </lightning-button>
 </div>
</lightning-card>
</template>

Answer 1

I solved my problem by creating an aura component and eliminating the flow screen altogether by wrapping the LWC component with an aura:component. This allowed me to then passed in the record id into the LWC component as shown below:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
    <c:lwccsvuploader recordId="{!v.recordId}"/>
</aura:component>

I was then able to add a quick action on the Account Record Detail page.

Answer 2

Use a design attribute in the flow:

HTML file: {recordId}

JS file: @api recordId;

.js-meta.xml file:

    <isExposed>true</isExposed>
<targets>
    <target>lightning__RecordPage</target>
    <target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightning__FlowScreen">
        <property name="recordId" type="String" label="Record Id" description="Input Record Id as a string or use variable {!recordId}"/>
    </targetConfig>
</targetConfigs>

DO NOT USE A DEFAULT VALUE - not supported by lightning flows will return undefined

In the builder, use variable {!recordId} or hardcoded recordId 'exa00fdsjkaflj' to set the field.