Skip to content

Instantly share code, notes, and snippets.

Embed
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"/>
</aura:event>
<!-- see see https://gist.github.com/peterknolle/bb4b7ac63f67f66c32b0 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"
onchange="{!c.notifyFileSelected}"
accept="{!v.accept}"
capture="{!v.capture}"
/>
<ui:button label="Save" press="{!c.save}"/>
<div aura:id="uploading" class="notUploading">
<img src="/resource/paura__images/loading-gray.gif" alt="uploading" class="small-spinner" /> Uploading...
</div>
</div>
</aura:component>
// just the snippet for event notification is below (see https://gist.github.com/peterknolle/bb4b7ac63f67f66c32b0 for the rest)
notifyFileSelected: function(component, event, helper) {
component.getEvent("fileSelectedEvent").setParams({
file: component.find("file").getElement()
}).fire();
},
<aura:component>
<aura:attribute name="parentId" type="Id"/>
<div class="container">
<paura:fileUpload
parentId="{!v.parentId}"
fileSelectedEvent="{!c.handleFileSelected}"
accept="image/*"
capture="camera"
/>
<img class="image" aura:id="imagePreview" />
</div>
</aura:component>
.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.
-->
<aura:application>
<div class="container">
<paura:photoPreview parentId="0013020s006DqaI"/>
</div>
</aura:application>
@LeoLiXX

This comment has been minimized.

Copy link

commented Jan 18, 2019

Hi Buddy,

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

Regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.