Image Preview Lightning Component

fileSelected.evt

<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>

fileUpload.cmp

<!-- 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>

fileUploadController.cls

// 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(); 
},

photoPreview.cmp

<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>

photoPreview.css

.THIS.container {
    width: 100%; 
    text-align: center;
}

.THIS .image {
    display: block; 
    margin: auto; 
    width: 90%;
}

photoPreviewController.js

({
    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);
        }
    }
})

widgets.app

<!-- 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>

Hi Buddy,

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

Regards,