6

I would like to change the text and the style of the "Upload Files" in the lightning:input. The style as far as I understand I would have to overwrite the slds class, but what about the text?

enter image description here

Improve this question
2
  • What do you want to change the text to? It uses standard labels, so it translates when you view it in another language. I don't think those standard labels are changeable for fully supported languages like English, only for platform languages (you need to translate all texts yourself for those). Perhaps it's possible to overwrite them programmatically in the lightning component.
    – Folkert
    Dec 5, 2017 at 14:04
  • That's my problem. I don't want to translate it. I want it to be "New Exam" no matter the idiom.
    – crashzilla
    Dec 5, 2017 at 14:10

3 Answers 3

Reset to default
7

Try adding these lines to your Lightning Style:

/* remove the "or drop files" label from the right of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__text{
    display: none;
}

/* remove the "Upload Files" text from the button of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__button{
    font-size: 0;
}

/* insert the text "New Exam" into the button of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__button:after{
    content: 'New Exam';
    font-size: .8125rem;
    color: rgba(27, 82, 151, 1.0);
}
Improve this answer
1

I was facing the same issue and realized there is no way to change "Upload Files" label.

But here is the work around, create a div (or any other html component), override the div on top of input file and bind both input file and div in a label.

Simply copy and paste this code in lightning component :

<label style="display: inline-block;position: relative;height: 50px;width: 250px;" for="inputFile">
        <div style="position: absolute;left: 0;top: 0;bottom: 0;
                    width: 100%;display: flex;border-radius: 10px;
                    align-items: center;justify-content: center;background: #ccc;
                    border: 3px dotted #bebebe;">
        Click or drop something here
        </div>        
              <lightning:input 
                               style="position: absolute;left: 0;opacity: 0;top: 0;bottom: 0;width: 100%;"
                               name="file1" type="file" label="Attachment" 
                               multiple="true" accept="image/png, .zip" />
      </label>
Improve this answer
1
  • please provide an explanation to your code, otherwise, it will be considered a code dump, which is not very useful.
    – glls
    May 12, 2019 at 1:16
0

Atul, great solution, it's self-explanatory for me and plus you did explain the approach is to "override". I would just add a couple of adjustments: label height: 45, label width: 240, this then tighten up the extra spacing (which doesn't fire the click/mouseover) around the lightning input control. Also, had to remove top:0 from the lightning input because it was leaving some space on top which again doesn't fire the click/mouseover on the input.

I prefer this approach over the CSS one because I dynamically change the text displayed to the user by passing the value from the controller. One use case would be the ability to change the language of the text based on the user's setting.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .