+ Start a Discussion
Athira VenugopalAthira Venugopal 

To insert an image into a custom object using apex code

HTML

<lightning-input label="Upload" name="file uploader"
onchange={handleFilesChange}
type="file" ></lightning-input>

<lightning-button label="Save" variant="brand" onclick={handleClick} ></lightning-button>

JS
import { LightningElement , wire, track, api} from 'lwc';
import newClient from '@salesforce/apex/PriceFetch.newClient'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class PriceScreen extends LightningElement {

@track fileName = '';
filesUploaded = [];
file;
fileContents;
fileReader;
content;
MAX_FILE_SIZE = 1500000;

handleFilesChange(event) {
if(event.target.files.length > 0) {
this.filesUploaded = event.target.files;
this.fileName = event.target.files[0].name;
this.uploadHelper();
} }

uploadHelper() {
this.file = this.filesUploaded[0];
if (this.file.size > this.MAX_FILE_SIZE) {
window.console.log('File Size is to long'); return ; }
// create a FileReader object
this.fileReader= new FileReader();
// set onload function of FileReader object
this.fileReader.onloadend = (() => {
this.fileContents = this.fileReader.result;
let base64 = 'base64,';
this.content = this.fileContents.indexOf(base64) + base64.length; this.fileContents = this.fileContents.substring(this.content);
// call the uploadProcess method }); this.fileReader.readAsDataURL(this.file); }

handleClick(event) {

newClient({base64Data: encodeURIComponent(this.fileContents)}) .then(result => {
const evt = new ShowToastEvent({ title: 'Saved succesfully', variant: 'success', });
this.dispatchEvent(evt); }) .catch(error => {
this.error = error; alert("FAILURE" + error); }); } }

APEX CLASS

@AuraEnabled(cacheable = false)
public static Boolean newClient(String base64Data ){
base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8'); String imageSource = Url.getFileFieldURL(Photo,EncodingUtil.base64Decode(base64Data))//error in this line 'unknown label 'Photo';

Client__c client = new Client__c();
client.Photo__c = '<img src="'+imageSource+'" />';
try {
insert client;
return true;
}
catch (Exception e) {
throw new AuraHandledException('exceptionText' + e.getMessage()); } }

In the above line, EncodingUtil.base64Decode(base64Data) is the 'VersionData'. While deploying to org, It shows an error, unknown label 'Photo'. Is there any mistake in my code?
Does anyone have a sample code?
ANUTEJANUTEJ (Salesforce Developers) 
Hi Athira,

You can try checking this below link as it seems to have a similar use-case of uploading an image using the lightning web component:

>> https://www.salesforcepoint.com/2020/06/lightning-web-componentlwc-custom-file.html

In case if this comes in handy can you please choose this as the best answer so that it can be used by others in the future.

Regards,
Anutej 
Athira VenugopalAthira Venugopal
Hi Anutej
I need to set the uploaded image into a custom rich text area field in my custom object 'Client'. I have refered the link, what is this 'Content Version' ? Where this uploaded image get stored using 'Content Version' ? Any idea?
ANUTEJANUTEJ (Salesforce Developers) 
ContentDocument: This object record you don’t have to create. It gets created when you create ContentVersion which is the child of ContentDocument.
ContentVersion: This object stores document information similar like Attachment.
ContentDocumentLink: This object will share the files with Users, Records, Groups etc. You can create multiple records to attach the same files under multiple records.
Link: https://www.biswajeetsamal.com/blog/tag/contentversion/

More information regarding  content version you can try checking in this link https://developer.salesforce.com/docs/atlas.en-us.api.meta/api/sforce_api_objects_contentversion.htm

Also, additionally, there is one more link I think could help you as this has the same requirement you are trying to achieve.

Same requirement implementation: https://sfdclesson.com/2019/03/17/show-the-uploaded-image-on-the-detail-page/