0

I want the functionality of lightning:input of type file but I don't want the UI as is given predefined :

enter image description here

Rather I want it to be shown as a normal button like lightning:button. How can this styling be achieved?

Markup

<lightning:input type="file"
   label="File"
   multiple="false"
   name="fileupload"
   accept="image/jpeg, image/png, .zip, .doc, .docx"                                          messageWhenTypeMismatch="Please upload supported file types"
   onchange="{!c.handleFileUpload}"
   class="slds-file-selector__dropzone slds-file-selector__dropzone .slds-file-selector__text"/>

CSS:

.THIS .slds-file-selector__dropzone{ 
    border: none;
}
.THIS .slds-file-selector__dropzone .slds-file-selector__text{ 
    display: none;
}

1 Answer 1

8

Here's the HTML rendered by the lightning input file:

<div data-reactroot="" class="slds-form-element">
  <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
  <div class="slds-form-element__control">
    <div class="slds-file-selector slds-file-selector_files">
      <div class="slds-file-selector__dropzone">
        <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id">
        <label class="slds-file-selector__body" for="file-upload-input-01">
          <span class="slds-file-selector__button slds-button slds-button_neutral">
            <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
            </svg>Upload Files</span>
          <span class="slds-file-selector__text slds-medium-show">or Drop Files</span>
        </label>
      </div>
    </div>
  </div>
</div>

So if you want to remove the label on the right and remove the border around the button, you'll need to add some css:

.THIS .slds-file-selector__dropzone{ /*the border around*/
    border: none;
}
.THIS .slds-file-selector__dropzone .slds-file-selector__text{ /*the right label*/
    display: none;
}

EDIT: Remove the icon and overrides the text

.THIS .slds-file-selector__dropzone .slds-file-selector__button .slds-button__icon{ /*For the icon*/
    display: none;
}
/*To override the text, you'll need to set the size of the current text to 0 and to add some content to the before selector of the button*/
.THIS .slds-file-selector__dropzone .slds-file-selector__button{
    font-size: 0;
}
.THIS .slds-file-selector__dropzone .slds-file-selector__button:before{
    content: 'Your custom text';
    font-size: token(fontSizeTextXSmall); /*Default token for font size 0.75rem*/
    color: token(colorBackgroundModalBrand); /*Default token for brand color #0070d2*/
}
5
  • Thanks for the reply! I applied the styling as mentioned by you in above classes in "class" attribute of lightning:input itsel and it worked. But the upload icon and "Upload Files" standard text is still visible. I want to overwrite it too, i.e replace the whole thing with a simple button. Can you help in this? I have updated my markup
    – Sarang
    Jun 26, 2017 at 8:42
  • I updated my answer. Jun 26, 2017 at 10:27
  • Thanks again! Will keep a note of this CSS for future references.
    – Sarang
    Jun 26, 2017 at 10:35
  • I attempted to use the edited version of this but received an error when saving the css file 'No TOKENS named markup://c:defaultTokens found'. From what I ahve read, default tokens should be available in aura css files. Does anyone know what might be causing this or a way around?
    – dannymorty
    Jul 3, 2020 at 12:03
  • 1
    Hi @dannymorty, it seems that design token has changed since the answer. Could you try to use token(fontSize2) instead of token(fontSizeTextXSmall) and token(brandPrimary) instead of token(colorBackgroundModalBrand). Jul 3, 2020 at 12:25

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.