2

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?

Improve this question
6
  • Have you tri d wrapping it in a div, with an onclick event?
    – glls
    Jul 9 '18 at 14:19
  • No. But I need the click of the fileUpload component. How would I trigger that?
    – Itai Shmida
    Jul 9 '18 at 14:22
  • What happens when you try? Nothing? An error?
    – sfdcfox
    Jul 9 '18 at 15:05
  • @sfdcfox nothing happens. if I use chrom dev tools and click F10 on this line, I get inside the aura_prod.js into a catch. is there a way to get to the actual input html element and click it?
    – Itai Shmida
    Jul 10 '18 at 6:41
  • @ItaiShmida have you found a solution for this? I've tried the div wrapper like suggested too but then I can't access the child input element. I would like to try a different approach using the onchange event - any ideas?
    – dangt85
    Nov 23 '18 at 17:34
0

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

Improve this answer
1
  • 3
    The downside of trying to roll your own lightning:fileUpload is, you'll be limited by the maximum Apex heap size. lightning:fileUpload can bypass that limit.
    – Charles T
    Jul 10 '18 at 1:30

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.