[SalesForce] How to trigger the click event of

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?

Best Answer

If you're not "satisfied" with the OOTB component, you are almost better off creating your own. You can view peter knowles FileController.cls Lightning component and style as needed. Otherwise, your only option will be to "overwrite" the current components CSS, and there is no "Clean" way to do this.

Here is a minimal CSS code sample (No scope) to achieve something similar to your icon only button alongside a few tips:

set the outermost element to:

visibility: hidden

and the innermost to 

visibility: visible

then, you can set a width to your component and hide the overflow text (to keep the icon:

width: 30px;
display: block;
overflow: hidden;
visibility: visible;

and set a margin to the primitive icon:

    margin-left: -Xpx;

And this should result in a small upload widget such as :

enter image description here

Related Topic