2

I have a lightning-input with type file so I can upload files. I don't want the little box that says "Or drop files" that shows up beside the upload button to show. Is there a way to hide it? upload screenshot

I've already seen the solution at Lightning:input type="file" change the "Upload Files" text, but it isn't working for me in LWC.

.html

<lightning-input
     type="file"
     onchange={handleFileUpload}
     accept="*"
     multiple></lightning-input>

.css

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

.THIS .slds-file-selector__text .slds-medium-show {
    display: none !important;
}

rendered .html

<span lightning-input_input="" class="slds-file-selector__text slds-medium-show">Or drop files</span>

2 Answers 2

1

I don't think you can access this because of the shadow dom limiting your access to it. may have to build one from scratch : /

2
  • I was afraid of that, thanks
    – aaron
    Sep 24, 2020 at 13:55
  • I would recommend using one of the workarounds from that thread, such as loadStyle or <style>. They're kind of hacky but you're going to have a really hard time recreating the standard upload component Sep 30, 2020 at 0:52
0

Actually there is one workaround that I used in my case

The idea is to 'hide' DropZone text. For that you need to create your css class and add your class to the lightning-file-upload component

<lightning-file-upload
        class="slds-align_absolute-center removeDropZone"
        name="fileUploader"
        accept={acceptedFormats}
        onuploadfinished={handleUploadFinished}>
</lightning-file-upload>

Then let's go to the css file and add that lines

 .removeDropZone {
      color: #ffffff;
      --lwc-borderWidthThin: 0px;
 }

The result: The result

Note: It does not help you too remove drop zone, this way helps to hide it.

You must log in to answer this question.

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