Not Hotdog Lightning Component

NotHotDog.cmp

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

NotHotDogController.js

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

NotHotDogHelper.js

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