Uploading Image to Rich Text Area Field in LWR Site using LWC.

Introduction:
During the Salesforce Summer ’23 release, the LWR (Lightning Web Runtime) sites do not support the direct uploading of image to rich text area fields. This limitation can be frustrating for developers and users who rely on LWR sites for their business processes. However, in this blog post, we will explore an alternative solution using LWC (Lightning Web Components) that allows for the uploading of image to rich text area fields.

Step 1: Creating the File Upload Component
In the first step, we will create a Lightning Web Component (LWC) that enables users to upload an image file. The component includes a file input field and an upload button. Let’s take a closer look at the code:

<div class="slds-grid slds-wrap slds-gutters slds-grid_vertical-align-center slds-grid_align-spread">
    <div class="slds-col slds-size_1-of-2">
        <lightning-input type="file" accept=".png, .jpg, .jpeg" label="Select Logo" onchange="{openfileUpload}"></lightning-input>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <lightning-button label="Upload" icon-position="right" icon-name="utility:upload" title="Upload" onclick="{uploadFile}"></lightning-button>
        <span lwc:if="{fileData.filename}" class="slds-p-left_small">{fileData.filename}</span>
    </div>
</div>

Step 2: The JavaScript Controller
The controller contains two methods that handle the image upload functionality. Let’s dive into the code:

@api recordId;
@track fileData = {};

openfileUpload(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  
  reader.onload = () => {
   const base64 = reader.result.split(",")[1];
   this.fileData = { filename: file.name, base64: base64 };
  };
  reader.readAsDataURL(file);
 }

 async uploadFile() {
  try {
    const { base64, filename } = this.fileData;
    await uploadLogo({ base64: base64, filename: filename, recordId: this.recordId });
    this.displayToastMessage("Success", "Image uploaded successfully", "success")
   }
  } catch (error) {
   reduceErrors(error).forEach(err => this.displayToastMessage("Error", err, "error"));
  }
 }

displayToastMessage(title, message, type) {
  const event = new ShowToastEvent({ title: title, message: message, variant: type });
  this.dispatchEvent(event);
}

openfileUpload(): This method is triggered when a user selects an image file. It retrieves the selected file from the event object and creates a FileReader object to read the file contents. Once the FileReader has finished reading the file, the method extracts the base64-encoded data and stores it along with the filename in the fileData variable.

uploadFile(): After the user selects an image in the file input and clicks the “Upload” button, the `uploadFile()` method is executed. This method extracts the file name and the base64-encoded file data and passes these values as parameters to the `uploadLogo` Apex method. The subsequent steps and processing are then handled by the Apex code.

Step 3: Apex Method
The Apex method takes three parameters: the encoded string, the filename, and the recordId. To convert a base64 encoded string into an image, it needs to be stored in a specific format as outlined below:

<img src="data:image/jpeg;base64,base64EncodedString" alt="rtaImage.jpeg"></img>

@AuraEnabled
public static void uploadLogo(String base64, String filename, String recordId) {
  try {
    String imageLink = '<p><img src="data:image/jpeg;base64,' + base64 + '" alt="rtaImage.jpeg"></img></p>';
    Account account = [SELECT Id, Image__c FROM Account WHERE Id =: recordId LIMIT 1];
    account.Image__c = imageLink; // Image__c is RTA field
    UPDATE account;
  } catch (Exception e) {
    throw new AuraHandledException(e.getMessage());
  }
 }

Conclusion:
Although Salesforce LWR sites currently do not offer a built-in feature to upload images directly to rich text area fields, the alternative solution presented in this blog post can help overcome this limitation. By leveraging the power of LWC and Apex, developers can provide users with the ability to upload and display images within rich text area fields, enhancing the visual appeal and functionality of their LWR sites.