Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Image Preview Lightning Component
<aura:event type="COMPONENT" description="Event fired when a file is selected">
<aura:attribute name="file" type="Object"
description="The file file input element that has the selected file"/>
<!-- see see for complete src of fileUpload component -->
<aura:component controller="paura.FileController">
<aura:attribute name="parentId" type="Id"/>
<aura:attribute name="accept" type="String" default=""/>
<aura:attribute name="capture" type="String" default=""/>
<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:registerEvent name="fileSelectedEvent" type="paura:fileSelected"/>
<div class="container">
<input type="file" aura:id="file" class="file"
<ui:button label="Save" press="{!}"/>
<div aura:id="uploading" class="notUploading">
<img src="/resource/paura__images/loading-gray.gif" alt="uploading" class="small-spinner" /> Uploading...
// just the snippet for event notification is below (see for the rest)
notifyFileSelected: function(component, event, helper) {
file: component.find("file").getElement()
<aura:attribute name="parentId" type="Id"/>
<div class="container">
<img class="image" aura:id="imagePreview" />
.THIS.container {
width: 100%;
text-align: center;
.THIS .image {
display: block;
margin: auto;
width: 90%;
handleFileSelected: function(component, event) {
var fileInput = event.getParam("file");
var theFile = fileInput.files[0];
// only display if it is an image
if ( theFile.type.indexOf("image/") == 0 ) {
var img = component.find("imagePreview").getElement();
img.src = URL.createObjectURL(theFile);
<!-- This is a simple app that shows how the component can be used.
The Id could be passed in via URL, dynamically determined, etc.
This is just for testing.
<div class="container">
<paura:photoPreview parentId="0013020s006DqaI"/>

This comment has been minimized.

Copy link

@LeoLiXX LeoLiXX commented Jan 18, 2019

Hi Buddy,

It seems like the URL.createObjectURL does not works on Salesforce Spring 19 :-(
Any idea?


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment