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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Hi Buddy,
It seems like the URL.createObjectURL does not works on Salesforce Spring 19 :-(
Any idea?
Regards,