lightning-bolt

Image Preview Lightning Component

In my last article I detailed a custom Lightning component for saving files as attachments on objects.  In this article I describe how that component can be used in conjunction with another component via a component level event to give the additional functionality of being able to preview a selected image prior to uploading it.  All code is available on GitHub.

High Level Design

The new component contains an instance of the fileUpload component and listens for an event that the fileUpload component fires when its file input has changed.  The component then displays a preview of the image.  If the user then desires, they can click the Save button on the fileUpload component to save the file as an attachment.  Due to the attributes set on the file input element, the phone’s camera is launched immediately when the Choose File button is clicked, instead of the file browser or something else being launched.

Screen capture of the photo preview lightning app on android
Uploading the picture that was just taken and being displayed (Android Lollipop)

Event Notification

A component level event is used to communicate that the file input has changed.  A single parameter, the input element, is declared as an attribute.

The fileUpload component registers that it can fire the event with the <aura:registerEvent> tag:

It also specifies an onchange handler in the file input element. (Quick side note: There is a standard valueChange event that can be used to detect data changes to attributes which is preferable for handling changes in most cases, but in this case there is no attribute value changing).

On the change of the file input, the fileUpload controller’s notifyFileSelected method is called.

It gets a reference to the event, sets the parameter to be the fileInput that changed, and then fires the event, completing its responsibilities for notification.

Event Handling

The photo preview component specifies its handler as part of the creation of an instance of the fileUpload component.

When the fileUpload component fires the event, the photo preview controller’s handleFileSelected method is called.  It retrieves the file input that was set as a parameter.  If the file is an image then the <img> element on the component has its src attribute updated to display the image.

Finally, if the user wants to, they can click the Save button from the fileUpload component to upload the image.

Other Possibilities / More Work

A component level event was added to an existing fileUpload component to allow it to be used by another component in a meaningful way.  With component level events, the containing component or the component itself handles the event.  The Lightning Component framework also supports application level events which allow any component to subscribe to an event.  The application event model is the traditional publish / subscribe model.  If the design of the app was that one photo preview component should display the preview for multiple fileUpload components, it would make more sense to use an application level event.

The fileUpload component could be enhanced to fire more events.  For example, an event when the file finishes uploading could be fired.  An event related to the progress of the file upload could be fired multiple times.

Although the phone’s camera is launched immediately when the file input’s Choose File button is clicked, it is not a nice looking control.  There are CSS and JavaScript hacks/tricks that could be used to customize the look of it.

More

A detailed explanation of the custom fileUpload component can be found in this article.  To learn more about Lightning see the Salesforce1 Lightning Developer page for a list of resources.

All code is available on GitHub.