3

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

  • 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 '17 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 '17 at 14:10
2

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);
}
0

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>
  • please provide an explanation to your code, otherwise, it will be considered a code dump, which is not very useful. – glls May 12 at 1:16

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.