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;
}
9

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*/
}
  • 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 '17 at 8:42
  • I updated my answer. – Martin Lezer Jun 26 '17 at 10:27
  • Thanks again! Will keep a note of this CSS for future references. – Sarang Jun 26 '17 at 10:35

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.