3

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.

6
  • Your code as is worked in my developer org without issues. Jul 11, 2018 at 21:54
  • What kind of record ID did you use? I can't even get the event to fire. Jul 12, 2018 at 6:02
  • I implemented force:recordId interface and housed my component within the context of a record. In fact, when I don't provide a valid recordId, the fileUpload component automatically grayed out/disabled. I also tried uploading a .txt, but the system wouldn't even let me pick it because it is not an acceptable extension in this situation. So not sure what's going on with you... Perhaps you should give more details on how you are using it? Perhaps give us the full markup to see? Which browser/OS? Are you using this within a community? Etc Jul 12, 2018 at 9:52
  • Have you tried hardcoding the recordId to see if that helps with your issue? Jul 12, 2018 at 10:00
  • I added the full component source to the original post. Jul 12, 2018 at 13:22

1 Answer 1

4

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

2
  • 1
    is there any resolution or work around for this? i was hoping to build out an application but it looks like uploading the file will have to be restricted to the native ui and then launch the application until this is resolved
    – textual
    Oct 30, 2018 at 21:55
  • Thank you. I was going through same issue and I do not see any clear documentation. Dec 21, 2018 at 16:55

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.