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.