Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Not Hotdog Lightning Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="EinsteinVision_Admin">
<aura:attribute name="initialised" type="boolean" default="false" />
<aura:attribute name="files" type="Object[]"/>
<aura:attribute name="spinnerWaiting" type="Boolean" default="false"/>
<aura:attribute name="image" type="String" />
<aura:attribute name="imagedata" type="String" />
<aura:attribute name="result" type="String" default="Need a picture"/>
<aura:attribute name="showResult" type="Boolean" default="false" />
<div class="slds-page-header">
<div class="slds-media">
<div class="slds-media__body slds-p-bottom_small ">
<h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Not Hotdog, Salesforce Edition">Not Hotdog, Salesforce Edition</h1>
<p class="slds-text-body_small slds-line-height_reset">Bob Buzzard • Hotdog? • Not Hotdog?</p>
</div>
</div>
</div>
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__body">
<h2>
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="[object Object]">
<span class="slds-text-heading_small">Upload a File</span>
</a>
</h2>
<input type="file" aura:id="fileInput" accept="image/*" onchange="{!c.resize}"/>
</div>
</header>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral" onclick="{!c.load}">Hotdog?</button>
</div>
</div>
<div class="slds-card__body slds-card__body_inner slds-p-top_small slds-theme_default">
<canvas aura:id="canvas" width="400" height="300" />
</div>
</article>
<aura:if isTrue="{! v.spinnerWaiting }">
<lightning:spinner size="medium"/>
</aura:if>
<img aura:id="image" style="width:100px; height:100px; display:none;" />
<aura:if isTrue="{!v.showResult}">
<div class="demo-only" style="height: 24rem;">
<section role="alertdialog" tabindex="-1" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal_prompt">
<div class="slds-modal__container">
<header class="{!'slds-modal__header slds-theme_' + (v.result=='Hot Dog'?'success':'error') + ' slds-theme_alert-texture'}">
<h2 class="slds-text-heading_medium" id="prompt-heading-id">{!v.result}</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<img src="{!$Resource.Results + '/' + (v.result=='Hot Dog'?'hotdog':'nothotdog') + '.png'}" />
</div>
<footer class="slds-modal__footer slds-theme_default">
<button class="slds-button slds-button_neutral" onclick="{!c.closeModal}">Okay</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</aura:if>
</aura:component>
({
closeModal : function(component, event, helper){
helper.closeModal(component, event);
},
resize : function(component, event, helper){
helper.resize(component, event);
},
load : function(component, event, helper) {
helper.load(component, event);
}
})
({
init : function(component, event) {
var image = component.find('image').getElement();
image.addEventListener("load",function(){
var canvas = component.find('canvas').getElement();
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
var MAX_WIDTH = 400;
var MAX_HEIGHT = 300;
var width = image.width;
var height = image.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0,0,width,height);
var idata = ctx.canvas.toDataURL().toString();
component.set('v.imagedata', idata);
});
component.set('v.initialised', true);
},
resize: function(component, event){
if (false===component.get('v.initialised')) {
this.init(component, event);
}
var fileInput = component.find('fileInput').getElement();
var imageFile = fileInput.files[0];
var fileReader = new FileReader();
var self=this;
fileReader.addEventListener("load",function(evt){
var imageSrc = evt.target.result;
var image = component.find('image').getElement();
image.src = imageSrc;
});
fileReader.readAsDataURL(imageFile);
},
closeModal : function(cmp, ev) {
cmp.set('v.showResult', false);
},
load : function(cmp, ev) {
var idata=cmp.get('v.imagedata');
var strDataURI = idata.split(',')[1];
var action = cmp.get("c.getHotDogPredictionKAB");
action.setParams({
base64: strDataURI
});
action.setCallback(self, function(a) {
cmp.set("v.spinnerWaiting", false);
var state = a.getState();
if (state === 'ERROR') {
console.log(a.getError());
alert("An error has occurred - " + JSON.stringify(a.getError()));
} else {
cmp.set("v.result", a.getReturnValue());
cmp.set("v.showResult", true);
}
});
cmp.set("v.spinnerWaiting", true);
$A.enqueueAction(action);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment