Salesforce | How to Upload File using the Button with the Guest User?

Step 1: Install these packages:

FlowActionsBasePack
FlowScreenComponentsBasePack
File Upload Improved

Step 2: Create a Screen Flow

Create a screen element in the screen flow.

Create a record element in the screen flow.

Create Apex Actions in the Screen Flow.

Click Save.
Click Activate.

Don't forget to check out: File Upload in Lightning Web Component (LWC) | All You Need to Know

Step 3: Create a community site or experience site.

Quick Find Box -> Sites -> Click New.

Step 4: Give the object access and field level access in the case object with read and create. Use the following snapshot to give field-level access.

Click the site -> Public Access Setting -> Search Case Object

Step 5: Click the Assigned User Button in the Profile.

Step 6: Click the Add Permission Set button at the bottom.

Step 7: Assign the File Upload Improved Permission set to this user.

Step 8: Create the Aura Component and Lightning Application. Use the below code:

Aura Component Bundle:

embedFlowInExternalWebsite.cmp

<aura:component implements="flexipage:availableForAllPageTypes,lightning:availableForFlowActions" access="GLOBAL">
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<lightning:flow aura:id="flowData"/>
</aura: component>

embedFlowInExternalWebsiteController.js

({
     init : function (component) {
          var flow = component.find("flowData");
          flow.startFlow("YOUR_FLOW_API_NAME");
          }
})

** Replace the ‘YOUR_FLOW_API_NAME’ string with the name of the flow you want to run.

Lightning Application:

embedFlowInExternalWebsiteApp.app

<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:embedFlowInExternalWebsite"/>
</aura: application>

Step 9: Add your website’s domain to the CORS Allowed Origins List.

Quick Find Box -> CORS -> click the New Button.

Step 10: Run this code:

<!DOCTYPE html>
<html>
<body>
<script src="https://curious-bear-q4ztlr-dev-ed.trailblaze.my.salesforce-sites.com/lightning/lightning.out.js"></script><div id="lightningLocator"></div><script>
    $Lightning.use("c:embedFlowInExternalWebsiteApp",
        function() {
            $Lightning.createComponent(
                "c:embedFlowInExternalWebsite",
                { },                  
                "lightningLocator",   
                function(cmp) {}
            );
        },
        'https://curious-bear-q4ztlr-dev-ed.trailblaze.my.salesforce-sites.com'
    );
</script></body>
</html>

** Importantly here, you need to insert the URL to your Salesforce org in 2 places just before the /lightning/lightning.out.js.

Check out another amazing blog by Aman here: What are Apex Triggers in Salesforce?