You need to sign in to do that
Don't have an account?
Athira 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?
<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?
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
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?
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/