[SalesForce] Lightning File Upload Component – Event Not Firing

I have implemented the lightning:fileUpload component within my own component, and I've used the sample code provided in order to test it out.

The issue I'm having is that it looks like the event onuploadfinished isn't firing.

Here is the component:

            <lightning:fileUpload label="Attach Photo:"     
                              name="fileUpload"   
                              multiple="false"
                              accept=".jpg,.png,.jpeg,.gif"
                              recordId="{!v.recordId}"
                              aura:id="lightningFileUpload"
                              onuploadfinished="{!c.handleUploadFinished}" 
                              disabled="false"/>

And here is the controller method that should be firing:

    handleUploadFinished: function (cmp, event) {
    alert('before upload');
    console.log('UPLOAD FINISHED');
    // Get the list of uploaded files
    var uploadedFiles = event.getParam("files");
    alert("Files uploaded : " + uploadedFiles.length);
},

The problem is, nothing happens. I click the "Upload File" button, select a small file with a valid extension, and the event appears not to fire. No alerts, nothing on the console. Just nothing.

For the record, the v.recordId points to a trivial static contact record that is also a community user. I'm using a static value just for testing purposes so I can just make it work.

Is there something I am missing?

EDIT: Here is the actual component markup:

Here is the markup for the component (I obfuscated the actual record id):

<aura:component  implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="edgeRecordId" type="String" default="(someid)" description="Record to which the files should be attached" />
<aura:attribute name="accept" type="List" default="['.jpg', '.jpeg']"/>
<aura:attribute name="multiple" type="Boolean" default="true"/>
<aura:attribute name="disabled" type="Boolean" default="false"/>
<div class="wrapper">
    <lightning:input name="file2" type="file" label="Using standard input with type of file" required="true" onchange="{! c.handleFilesChange }"/>

    <lightning:fileUpload  name="fileUploader"
                           label= "Using lightning:fileUpload"
                           multiple="{!v.multiple}"
                           accept="{!v.accept}"
                           disabled="{!v.disabled}"
                           recordId="{!v.edgeRecordId}"
                           onuploadfinished="{! c.handleUploadFinished }"/>
</div>

I also used the standard lightning:input component for comparison. Don't mind the lack of a closing tag for aura:component. It's stack exchange omitting it.

Best Answer

Been searching for the answer and think I may have found it!

Apparently, the event will not fire in standalone apps or lightning out. To test I put the same component on a record page and, behold, it works.

Something that would have been nice to have somewhere in the documentation...

Related Topic