I want to display the lightning:fileUpload
differently
After many tryouts with css hacks, I decided this is not good enough
My current approach is to create a different button, and upon clicking on it - trigger the click of the lightning:fileUpload
But I am failing to click the component - I have tried to get the component with aura:id and click it:
MARKUP
<aura:component>
<aura:attribute name="recordId" type="Id" description="Id of the current record" />
<lightning:buttonIcon iconName="utility:upload" variant="border-filled" size="large" onclick="{!c.uploadFile}" title="upload file" />
<lightning:fileUpload aura:id="fileUploader"
class="slds-hide"
multiple="false"
recordId="{!v.recordId}"
onuploadfinished="{!c.handleUploadFinished}"
title="Click to upload a file"/>
</aura:component>
CONTROLLER
uploadFile: function(component, event, helper) {
var fileUploader = component.find("fileUploader");
fileUploader.click();
}
QUESTION
Is there a way to trigger the click event of the lightning:fileUpload
component?
If not - is there a more elegant way to replace lightning:fileUpload
component's button and all other visual stuff, and display a more nice simple button?
input
html element and click it?