1

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);
    }
  • You have already registered the event. You may access it like this var evt = component.getEvent("simpleEvent"); – N.. Mar 13 '17 at 5:59
  • This resolved the error. But I am not getting the param on Parent component which I want it to set for some attributes. Can you tell me what I am missing on that? – ləːnə Mar 13 '17 at 6:52
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}"/>
  • 1
    I thought global on the event would mean the event is available outside the package ?Wondering why we need global if an application event is meant to be used only in the current package – Mohith Shrivastava Mar 14 '17 at 5:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.