Create a Lightning Component for Drag-and-Drop Profile Pictures

Lightning Components and App Builder make it easy to customize Record Home Pages (pilot feature in Winter 16). Sometimes a simple component can add a lot of value to a page by streamlining a common task.

In this article I share a simple ProfilePicture component that allows you to upload a profile picture using drag-and-drop, and display it on the Record Home page. It can be used for Accounts, Contacts and other objects.

Watch the video below to see how to install and use the ProfilePicture component.

https://youtu.be/YKteL4iLj-w

Source Code

Component

The flexipage:availableForAllPageTypes interface indicates the component can be used in App Builder
The force:hasRecordId interface indicates the current record Id should be injected in the component’s recordId attribute

Controller

Helper

Style

Design

This part is required to use the component in App Builder. The attribute makes the initial message (“Drag profile picture here”) configurable in App Builder.

Apex Controller

Adjust the code to work with a specific object type. For example, replace Contact with Account if you want to use the component with Account objects. You could also write a generic version that detects the object type based on the id, and checks permissions on that object type.
getProfilePicture() retrieves the profile picture for a specific record. By convention, we use the latest image attached to the record. You could easily tweak that strategy. For example, you could add a custom field to the parent object to keep track of the Id of the specific attachment you want to use as the profile picture.
saveAttachment() creates the attachment for the picture you uploaded

Installation Instructions

See my previous post for detailed steps on how to enable the Lightning Experience and the pilot feature that allows you to customize Record Home Pages with App Builder.

Resources and Acknowledgement

Peter Knolle’s generic FileUpload component provided a great starting point to build ProfilePicture. Peter’s article also includes a strategy for dealing with large files.