15 years ago an Idea popped up on the Idea Exchange. The Idea was simple enough: “I would like the ability to generate or write into the HTML code the ability to attach files to cases before they are submitted through the online form.” Unfortunately the implementation is tricky. So tricky that Salesforce had to punt their proposed GA release of the feature from Summer ‘22 to an undetermined date in the future.
I write with good news, however! With version 1.7 of File Upload Improved, you can create a “Web-to-Case” form on your website that enables files to be uploaded and automatically added to the newly created case.
The snippet of code that you add to your website is different from the one generated by Setup —> Web To Case because you’re actually embedding a screen flow on your site using Lightning Out. What’s powerful about this is that you can tap into all of the power of flow to craft your web form and process the resulting customer data.
Security Considerations
As always, when you allow guest users to run flows, you need to consider the security ramifications. We have included tips below to mitigate any security exposures, but we recommend a careful review of the permissions granted to your Guest User and Profile, and your sharing settings.
Video Walkthrough
I’ve recorded a video that illustrates an end-to-end walkthrough of how to implement this in your own org. I’ve also included a high level overview of the steps below, with links to the applicable parts of the video.
Step 1
Install File Upload Improved
Step 2
Create your Screen Flow.
Two points to note:
1. You might consider NEVER setting How to Run the Flow field on the Flow Properties configuration screen to System Context in order to limit unnecessary access. Never heard of this? Don’t worry, this is not the default option, and would require you to manually make the selection.
2. As an extra layer of security, you might consider restricting access to ALL of your Flows across the board to only those profiles (or permission sets) who need them. You can do this by selecting Edit Access from the down arrow drop down on the right of the Flow Definitions screen…
… and then selecting the appropriate profiles to enable access.
Step 3
Create a Site or Community (aka Experience)
Step 4
Grant permissions to the Guest User’s profile that match the scope of the operation of the Screen Flow. In our example, we are granting the Guest User the ability to Create Cases as well as Edit the Supplied Name, Email, Subject, and Description fields of the Case object.
It’s also important to assign the File Upload Improved permission set to the Guest User.
Step 5
Create an Aura Component and update the .cmp file with this code:
<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>… and the Controller.js file with this code:
({
init : function (component) {
var flow = component.find("flowData");
flow.startFlow("YOUR_FLOW_API_NAME");
}
})Importantly, replace the ‘YOUR_FLOW_API_NAME’ string with the name of the flow you want to run. A simple flow that has a single screen and then creates a case is a good choice. Use the File Upload Improved screen component to upload attachments.
It’s important to realize that if a user knows (or can guess) another Flow API Name, they could access that flow. This is why, in Step 2, we recommend restricting access to ALL flows to only those who need the access. With that extra security measure, even if the user knew (or could guess) another Flow API Name, they wouldn’t have the access permission.
Step 6
Create an Aura Application and update the .app file with this code:
<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:embedFlowInExternalWebsite"/>
</aura:application>Step 7
Add your website’s domain to the CORS Allowed Origins List.
Step 8
To make it work, you embed a small piece of code (a ‘snippet’) on your webpage:
<script src="https://YOUR-SALESFORCE-SITE-URL.com/lightning/lightning.out.js"></script>
<div id="lightningLocator"></div>
<script>
$Lightning.use("c:embedFlowInExternalWebsiteApp",
function() {
$Lightning.createComponent(
"c:embedFlowInExternalWebsite",
{ },
"lightningLocator",
function(cmp) {}
);
},
'https://YOUR-SALESFORCE-SITE-URL.com'
);
</script>Importantly here, you need to insert the URL to your Salesforce org in 2 places.