New LWC lightning__FlowAction Target

The Salesforce Winter ’26 release for LWC introduced a few really cool features. I may post about more of them later, but in this article I want to focus on the new configuration target available for our components.

The new configuration target is lightning__FlowAction, and it opens some pretty cool doors for screen flow customizations. Check it out in the official docs.

Basically, it allows us to create an LWC that can be called as an action from a flow. The cool thing is that the component has access to the browser and some of its features/APIs.

My initial thought was, “How cool would it be if the LWC could access the File System API”. I didn’t think that would be allowed due to security restrictions. But I admit it’s been a while since I’ve had the time to play with LWCs, and the security landscape has changed a bit.

To my surprise, I was able to access the File API. I created a quick LWC and pulled it in via flow. Screenshots and code below.

Here is the flow at runtime. When the user clicks the button it invokes the LWC.

After the “Next” button is clicked, the LWC tells the browser to open a file window in the machine’s operating system. In the screenshot below we see that I have selected a text file named “example file.txt”

When I click the “Open” button, the text file is sent from local file system to the browser and then to the LWC that is inside the flow. This LWC only logs the file header and the file contents to the console, but you can do some pretty cool things from this point.

LWC Configuration File Code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>65.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__FlowAction</target>
   </targets>
</LightningComponentBundle>

LWC Javascript File Code

import { api, LightningElement } from 'lwc';

export default class FlowAction extends LightningElement {

    @api async invoke() {

        const [fileHandle] = await window.showOpenFilePicker({
            types: [{
                description: "Text",
                accept: {"text/plain": [".txt"]}
            }],
            excludeAcceptAllOption: true,
            multiple: false,
        });

        const file = await fileHandle.getFile();

        // declutter
        console.clear();

        // log file header
        console.group('FILE HEADER')
        console.log(file);
        console.groupEnd();

        const reader = new FileReader();

        reader.addEventListener("load", () => {

            // log file content
            console.group('FILE CONTENT');
            console.log(reader.result);
            console.groupEnd();
        });

        if (file) {
            reader.readAsText(file);
        }
    }
}