Transform Your Salesforce Approach With Web-to-Case Attachments

Salesforce Service Cloud is a customer service and support platform designed to help businesses manage customer interactions. A critical component of this platform is the Web-to-Case feature, which allows companies to capture customer support requests directly from their websites and automatically create new cases in Salesforce.

While this feature facilitates efficient case management, it comes with certain limitations.

Addressing the Limitations

Web-to-Case forms don’t support the following content types:

• Attachments: With standard out-of-the-box functionality, it is not possible to include attachments when creating cases via Web-to-Case.
• Rich Text Area fields: If you use these fields on your forms, any information entered in them is saved as plain text when the case is created.
• Multipart/Form-Data: Cases aren’t created for forms that use this content type.
• Script Tags: When script tags are submitted in Web-to-Case forms, the tags are saved as plain text in the case details.

Demand for Attachments

The demand for enhanced functionality that includes file attachments has been prevalent for years – an idea from September 2007 that covers this functionality has 40k+ points on IdeaExchange.

At the time of writing this article, the idea is 31^st all-time in points and 11^th all-time if you don’t count ideas that are either delivered or in development. Even though it states that the feature is on the roadmap, there are no clear dates in place for its delivery.

Current Workarounds

Externally Accessible Screen Flow

This workaround involves creating a custom screen flow accessible externally from Salesforce. It raises concerns about security due to the need for guest user access and the possibility of exposing internal flows. The requirement for custom development using Aura Components, which is being phased out, is another drawback.

FormStack/Form Assembly/Salesforce Sites Page & File Request Pro

These solutions offer different approaches to handling Web-to-Case attachments. FormStack and Form Assembly are external services that come with significant costs and additional setup complexities.

Salesforce Sites Page, while a part of the Salesforce ecosystem, requires separate development from the existing website and relies on Visualforce, a technology considered legacy.

File Request Pro integrates with Salesforce but is also costly and has limitations on the number of monthly requests.

Each of these methods presents challenges in terms of cost, reliance on external services, and the need for substantial custom development.

A New Way to Handle Attachments

Addressing this gap, we recommend a new way to support this feature within Service Cloud, utilizing JavaScript but avoiding external API integrations or complex custom development. It involves using Text Area fields for the transfer of Base64 encoded file strings and Salesforce automation for processing these strings into Attachment records.

Create a new Text custom field on the Case object called Attachment Name.

Create a new Text Area (Long) custom field on the Case object called Attachment.

Set field length to 131072 characters.

Generate a Web-to-Case HTML form.

Make sure to include both of the custom fields and select Generate.

The generated snippet is a basic HTML form that includes input boxes for all the fields you selected and the URL of the org where the form was generated. Create a new text file and paste the generated snippet into it so that you can edit it.

Save the file to your computer and change the extension to “.html”. This way, you can review your form by opening the file with your web browser. It should look something like this:

Locate the custom fields within the form:

Attachment:<textarea  id=… ><br>
Attachment Name:<input id=… ><br>

Remove the text “Attachment:” and “Attachment Name:“, add a hidden attribute to the textarea and input tags, and add the following snippet below:

<input id="attachment" type="file">

Add the following javascript code at the bottom of the file (make sure to replace the field Id values with yours):

<script>
	function readFile() {
    	const input = event.target;
    	if (input.files && input.files.length > 0) {
        	const file = input.files[0];
        	const FR = new FileReader();
        	FR.addEventListener("load", function(evt) {
            	document.getElementById("00N07000001YMTe").value = file.name;
            	document.getElementById("00N07000000nK23").value = evt.target.result;
        	});
        	FR.readAsDataURL(this.files[0]);
    	}
	}
	document.querySelector("#attachment").addEventListener("change", readFile);
</script>

This makes sure that the hidden elements get populated when a file is selected. Upon submitting the form, the custom Case fields will have values even though they were hidden from the user interface.

The form should now look something like this:

Feel free to add some style to your form so that it suits your website better (for the purpose of this article, we’ll leave it like this).

In Salesforce, set up an Apex Trigger to handle the incoming Base64 encoded data. Here’s a simplified example – be sure to follow best practices and utilize trigger handlers in your implementation:

Apex

trigger CaseTrigger on Case (after insert) {
	List<Attachment> attachmentList = new List<Attachment>();
	
	for (Case caseRecord : Trigger.new) {
    	if (caseRecord.Attachment__c != null) {
        	String base64Content = caseRecord.Attachment__c.substringAfter('base64,');
        	try {
            	Attachment att = new Attachment(
                	Body = EncodingUtil.base64Decode(base64Content),
                	Name = caseRecord.Attachment_Name__c,
                	ParentId = caseRecord.Id
            	);
                attachmentList.add(att);
        	} catch (System.StringException e) {
                System.debug(e.getMessage());
        	}
    	}
	}
	
	if (!attachmentList.isEmpty()) {
    	insert attachmentList;
	}
}

This trigger processes the Base64 data when the case is created and inserts an Attachment record related to the Case.

And that’s it! You’re ready to try it out: open the form in your browser, populate it, attach a file, and click submit. Find your newly created case in Salesforce and open it. Go to the Related tab and there should be a file in the Attachments related list.

 Final Thoughts

Keep in mind the file size limitations imposed by the character limits of text area fields in Salesforce. The maximum file size can range from ~0.13 to ~1.6 MB, depending on the number of Text Area (long) fields you create. A single field allows at most 131,072 characters. Each object can contain 1,638,400 characters across long text area and rich text area fields. If you decide to use multiple fields, you will have to update your code to separate the encoded file string into multiple inputs and concatenate it in the Apex Trigger.

Also, remember that implementing this solution requires a degree of familiarity with JavaScript and Apex development. Nevertheless, this should cover a significant portion of use cases until Salesforce adds the feature in one of its future releases.