Module 8: Creating a Controller Extension

In this module, you enhance the Visualforce page you built in module 7: you create a controller extension that allows users to upload speaker pictures.

Step 1: Extend the Data Model

In this step, you add two fields to the Speaker object: Picture_Path to store the location of the picture on the server, and Picture, a Formula field used to display the image in the Visualforce page.

  1. In Setup, select Build > Create > Objects, and click the Speaker link

  2. In the Custom Fields & Relationships section, click New, and create a Picture_Path field defined as follows:

    • Data Type: Text
    • Field Label: Picture Path
    • Length: 255
    • Field Name: Picture_Path

    Click Next, Next, Save & New

  3. Create a Picture field defined as follows:

    • Data Type: Formula
    • Field Label: Picture
    • Field Name: Picture
    • Formula Return Type: Text
    • Formula: IMAGE(Picture_Path__c, '')

      Make sure you use two single quotes and NOT a double quote.

    Click Next, Next, Save

Step 2: Create a Controller Extension

  1. In the Developer Console, select File > New > Apex Class, specify SpeakerControllerExtension as the class name and click OK

  2. Implement the class as follows:

    public class SpeakerControllerExtension {
        public blob picture { get; set; }
        public String errorMessage { get; set; }
        private final Speaker__c speaker;
        private ApexPages.StandardController stdController;
        public SpeakerControllerExtension(ApexPages.StandardController stdController) {
            this.speaker = (Speaker__c)stdController.getRecord();
            this.stdController = stdController;
        public PageReference save() {
            errorMessage = '';
            try {
                upsert speaker;
                if (picture != null) {
                    Attachment attachment = new Attachment();
                    attachment.body = picture;
           = 'speaker_' + + '.jpg';
                    attachment.parentid =;
                    attachment.ContentType = 'application/jpg';
                    insert attachment;
                    speaker.Picture_Path__c = '/servlet/servlet.FileDownload?file='
                    update speaker;
                return new ApexPages.StandardController(speaker).view();
            } catch(System.Exception ex) {
                errorMessage = ex.getMessage();
                return null;

    The save() method overrides the standard controller's default behavior.

  3. Save the file

Step 3: Modify the Visualforce page

  1. In the Developer Console, open the SpeakerForm page, and add the controller extension to the page definition:

    <apex:page standardController="Speaker__c" extensions="SpeakerControllerExtension">
  2. Add an inputFile (right after the Email inputField):

    <apex:inputFile value="{!picture}" accept="image/*" />

    Make sure you use an inputFile and not an inputField

  3. Display the potential errorMessage right after </apex:pageBlock>

  4. Save the file

Step 4: Test the Application

  1. Click the Speakers tab

  2. Click New to add a speaker

  3. Enter the speaker first name, last name and email

  4. Click the Choose File button and select a jpg file on your file system

  5. Click the Save button: you should see the image on the speaker's details page

comments powered by Disqus