1

I am using lightning:fileUpload multiple times inside aura:iteration.

After the button was clicked and the file was uploaded, I am using onuploadfinished event to do some stuff, but I need to identify which lightning:fileUpload button was clicked and cannot do so.

I cannot use aura:id on the lightning:fileUpload component because my id is dynamic (from aura:iteration) and I need to put literal id there:

I also cannot use event.currentTarget.id in the controller because the onuploadfinished event has no target and no currentTarget objects so I cannot find the id.

This is my code:

MARKUP

<aura:component>
    <aura:attribute name="files" type="FileWrapper[]" />

    <aura:iteration items="{!v.files}" var="file">
        <lightning:fileUpload id="{!file.formName}"
                              aura:id="{!file.formName}"
                              label="Upload a new file"
                              recordId="{!v.recordId}"
                              onuploadfinished="{!c.handleUploadFinished}"/>
    </aura:iteration>
</aura:component>

CONTROLLER

({
    handleUploadFinished: function (component, event, helper) {

        // get the aura:id
        var auraId = event.getSource().getLocalId();    // returns "{!file.formName}"

        // get the id
        var currentTarget = event.currentTarget;    // returns null
        var target = event.target;  // returns null
        var id = currentTarget.id;  
        // now do some stuff
    }
})

QUESTION

How can I use multiple lightning:fileUpload components in an iteration and uniquely identify which one was pressed?

  • Why do you have multiple file upload components? – glls Apr 12 '18 at 12:13
  • @glls Each upload button uploads a different type of file – Itai Shmida Apr 12 '18 at 12:47
1

instead of using aura:id or Id you can use name attribute of fileUploadComponent

<aura:component>
    <aura:attribute name="files" type="FileWrapper[]" />

    <aura:iteration items="{!v.files}" var="file">
        <lightning:fileUpload name="{!file.formName}"
                              label="Upload a new file"
                              recordId="{!v.recordId}"
                              onuploadfinished="{!c.handleUploadFinished}"/>
    </aura:iteration>
</aura:component>

your JS code will be

({
    handleUploadFinished: function (component, event, helper) {

        // get the aura:id
        var fileId = event.getSource().get('v.name');    

        // now do some stuff
    }
})
| improve this answer | |
  • 1
    Another trick when dealing with components that need unique-ness, but there's nowhere to store it... You can use class attribute to embed some of your dynamic id merges. If you have actual class names you can split by " " and then deal with a prefix match then split out the unique identifier within the "class" name. – tsalb Apr 12 '18 at 23:11

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.