I'm using the lightning:fileUpload component. My FileUploader.cmp looks like this:

<aura:component access="global" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
    <aura:attribute name="myRecordId" type="String" description="Record to which the files should be attached"/>
    <aura:attribute name="recordId" type="Id" />
    <lightning:fileUpload label="Attach documents" 
        accept=".pdf, .png"


My FileUploaderController.js is the standard one looking like this:

    handleUploadFinished: function (cmp, event) {
        // Get the list of uploaded files
        var uploadedFiles = event.getParam("files");
        alert("Files uploaded : " + uploadedFiles.length);

The fileUpload looks like this:

enter image description here

Now I want it to look like this

enter image description here

as described on the slds website (www.lightningdesignsystem.com/components/file-selector). Can someone please show me how to do this? I'm not sure how to include the State Dragover from that link into my component.

  • Hi Sebastian, could you please upload your code to the post, its not really fair to ask others to do the work for you. Try and show some level of effort, as is, this post is most likely to be closed. – glls Oct 20 '17 at 20:47
  • Hi glls, Not sure what you mean, the whole code is the FileUploader.cmp. For the sake of completeness, I added the FileUploaderController.js. Anything that I'm still missing? – Sebastian Lechner Oct 20 '17 at 21:17
  • What you are referring to is basically a change of styling to the Button. I don't see any styling change attempt in your code – glls Oct 20 '17 at 21:37

Thanks for guiding me in the right direction. I decided that below fits my requirement better: enter image description here

The FileUploader.css looks like this:

.THIS .slds-file-selector{
    display: flex;
.THIS .slds-file-selector__dropzone{
    height: 110px;
    width: -webkit-fill-available;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: auto;

.THIS .slds-file-selector__dropzone .slds-file-selector__text{ /*the right label*/
    font-size: 100%;

What you will want to do is add a design file to your component and start adding styling to the different classes rendered.

enter image description here

notice how the background of the file selector area changes to red.

use your browsers developer tool to check for classes, you can test live in your browser and start adding some CSS to your design file.

Most of the classes will be found in the link you referenced in your post, however, you might want to start checking in-browser.

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.