Photo Uploader for Leads

 A very common requirement across organizations that use Salesforce is the ability to upload a profile picture for the leads and contacts they are dealing with. Unfortunately, there is no OOTB feature provided by Salesforce which meets this requirement. There are multiple ideas on the trailblazer community where people have asked for this feature. Also, there are a few apps available on AppExchange which allow you to upload a profile picture, but those apps come with their own branding, and the majority of the organizations are not comfortable using such apps.

Considering all the above points, I have created an unmanaged package named "Lead Photo Uploader" which allows you to upload a profile picture against a lead record. Since this is an unmanaged package, you will have the access to the codebase and you can also modify it as per your needs. The same concept can be extended to other objects such as Contacts or other custom objects in your org. Here is a short video that shows a sneak peek of the application:

The unmanaged package contains below listed components:

• An LWC component bundle called "Lead Photo Uploader" - This component needs to be added to the Lead record page
• A custom field named "Lead.Photo_Id__c" - This field will be added to the Lead object once you install the package. This field is used to store the content version id.

Here is the link to the unmanaged package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t6F000004PC4w

Let's have a look at the code and try to understand the important functionalities:

leadPhotoUploader.html

The HTML code is pretty simple. The first section is displayed if the Photo_Id__c field on the Lead object has a value populated in it. If the value is present, the content version id is rendered using an image tag. The second section is displayed if the Photo_Id__c field on the Lead object is null. If the value is null, an option to upload the photo is presented to the user. Here, I have used the lightning-file-upload LWC component to upload the photo.

	<template>
	<div class="slds-p-around_medium c-bg">
	<template if:true={photoId}>
	<img class="slds-align_absolute-center c-image-round" src={photoURL}></img>
	</template>
	<template if:false={photoId}>
	<lightning-file-upload
	label="It seems like you have not uploaded any photo till now. Please click on the Upload Files button."
	name="fileUploader"
	accept={acceptedFormats}
	record-id={recordId}
	onuploadfinished={handleUploadFinished}
	>
	</lightning-file-upload>
	</template>
	</div>
	</template>

view raw leadPhotoUploader.html hosted with ❤ by GitHub

leadPhotoUploader.js

Here we make use of the getRecord wire adaptor to get the value of Photo_Id__c field. If the value is not null, the image is shown in the HTML. If the value is null, then an option to upload the photo is presented to the user. When the user clicks on Upload Files button, the handleUploadFinished method is called. The beauty of the lightning-file-upload method is that it automatically uploads the file into the Document object and returns you the documentId and the contentVersionId. We use this content version id in the image tag to display the profile picture. Also, I have used the updateRecord wire adaptor here to update the Photo_Id__c field with the contentVersionId so that the next time you open this lead record, the component will know which image it needs to show as a profile picture.

	import { LightningElement, wire, api } from 'lwc';
	import { ShowToastEvent } from 'lightning/platformShowToastEvent';
	import { getRecord, updateRecord } from 'lightning/uiRecordApi';
	import { refreshApex } from '@salesforce/apex';
	import ID_FIELD from '@salesforce/schema/Lead.Id';
	import PHOTO_ID_FIELD from '@salesforce/schema/Lead.Photo_Id__c';
	export default class LeadPhotoUploader extends LightningElement {
	@api recordId;
	lead;
	photoId;
	photoURL;
	/* Load Lead.Photo_Id__c for displaying the photo */
	@wire(getRecord, { recordId: '$recordId', fields: [PHOTO_ID_FIELD] })
	wiredRecord({ error, data }) {
	if (error) {
	let message = 'Unknown error';
	if (Array.isArray(error.body)) {
	message = error.body.map(e => e.message).join(', ');
	} else if (typeof error.body.message === 'string') {
	message = error.body.message;
	}
	this.dispatchEvent(
	new ShowToastEvent({
	title: 'Error loading information',
	message,
	variant: 'error',
	}),
	);
	} else if (data) {
	this.lead = data;
	if (this.lead.fields.Photo_Id__c.value) {
	this.photoId = this.lead.fields.Photo_Id__c.value;
	this.photoURL = '/sfc/servlet.shepherd/version/download/' + this.photoId;
	}
	}
	}
	get acceptedFormats() {
	return ['.png','.jpg','.jpeg'];
	}
	handleUploadFinished(event) {
	// Get the list of uploaded files
	const uploadedFiles = event.detail.files;
	this.photoId = uploadedFiles[0].contentVersionId;
	this.updateLead(this.photoId);
	this.photoURL = '/sfc/servlet.shepherd/version/download/' + this.photoId;
	}
	updateLead(photoId) {
	const fields = {};
	fields[ID_FIELD.fieldApiName] = this.recordId;
	fields[PHOTO_ID_FIELD.fieldApiName] = photoId;
	const recordInput = { fields };
	updateRecord(recordInput)
	.then(() => {
	// Display fresh data in the form
	return refreshApex(this.lead);
	})
	.catch(error => {
	this.dispatchEvent(
	new ShowToastEvent({
	title: 'Error updating photo information on lead record',
	message: error.body.message,
	variant: 'error'
	})
	);
	});
	}
	}

view raw leadPhotoUploader.js hosted with ❤ by GitHub

leadPhotoUploader.css

To display the profile picture in a circular format, I have applied the border-radius as 50% to the image tag.

	.c-bg {
	background-color: rgb(242, 242, 242);
	}
	.c-image-round {
	border-radius: 50%;
	height: 70px;
	width: 70px;
	}

view raw leadPhotoUploader.css hosted with ❤ by GitHub

If you want to try this functionality in your org, you just need to install the package and add the "Lead Photo Uploader" component in the Lead Record Page and you are good to go. If you have any feedback, please post it in the comments section.