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>