Salesforce Lightning Component TypeError evt is undefined

Question

I have a child component to upload a file and set the file related values on the event parameters and calling that event on the parent component.The event is of application type. Whenever i click on save after uploading the file it throws an error saying

"TypeError: evt is undefined throws at https://force.com/s/sfsites/auraFW/javascript/2udAo9HXlgsMA3tZDXLDsg/aura_proddebug.js line 2800 > Function:55:9" TypeError: evt is undefined"

Upload Event

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="fname" type="String"/>
    <aura:attribute name="bdata" type="String"/>
    <aura:attribute name="ctype" type="String"/>
</aura:event>

Child Component

<aura:component>
    <aura:attribute name="parentId" type="Id"/>
    <aura:registerEvent name="simpleEvent" type="c:UploadFileEvent" />
    <aura:handler event="aura:waiting" action="{!c.waiting}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
    
    <div class="container">
        <input type="file" class="file" aura:id="file" />
        <ui:button label="Save" press="{!c.save}"/>
        
        <div aura:id="uploading" class="notUploading">
            <img src="/resource/images/loading-gray.gif" alt="uploading" class="small-spinner" /> Uploading...
        </div>
    </div>
    
</aura:component>

Child Component Helper

({
    MAX_FILE_SIZE: 750 000, /* 1 000 000 * 3/4 to account for base64 */

    save : function(component) {
        var fileInput = component.find("file").getElement();
        var file = fileInput.files[0];
   
        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
              'Selected file size: ' + file.size);
            return;
        }
    
        var fr = new FileReader();
        
    var self = this;
        fr.onload = function() {
            var fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

            fileContents = fileContents.substring(dataStart);
        
            self.upload(component, file, fileContents);
        };

        fr.readAsDataURL(file);
    },
        
    upload: function(component, file, fileContents) {
        
           var fileName = file.name;
           var base64Data = encodeURIComponent(fileContents);
           var contentType = file.type;
        alert("inside upload");
           var evt = $A.get("e.c:UploadFileEvent");
            evt.setParams({ "fname": fileName,
                            "bdata" : base64Data,
                            "ctype" : contentType
                          });
            evt.fire();
        alert("hiya");
            
    }
})

Parent Component

<aura:component access="global" implements="forceCommunity:availableForAllPageTypes" controller="ComponentController">
<aura:handler event="c:UploadFileEvent" action="{!c.uploadFile}"/>   
<c:uploadFileComponent/>
</aura:component> 

Parent component controller

uploadFile : function(component,event,helper){
        var context = event.getParam("fname");
        alert("context"+context);
    }
    

Answer 1

Go Back to:

var evt = $A.get("e.c:UploadFileEvent");

In the UploadFileEvent, add access="global" to your event definition:

<aura:event type="APPLICATION" description="Event template" access="global">

That should work.

For the use case you describe you could also use a component event instead of an application event.

In that case, the event would be defined like this:

<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name="fname" type="String"/>
    <aura:attribute name="bdata" type="String"/>
    <aura:attribute name="ctype" type="String"/>
</aura:event>

You'd register it like this in your child component:

<aura:registerEvent name="onupload" type="c:UploadFileEvent" />

You’d get the event like this in your child component's upload function:

var evt = component.getEvent("onupload");

and you would code your parent component like this (no need for aura:handler in this case):

<c:uploadFileComponent onupload="{!c.uploadFile}"/>