How to identify which lightning:fileUpload was clicked

Question

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?

Answer 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
    }
})