I created file upload function using lightning-file-upload. Its buttons are showed "uplopadFiles" and "ordrop files". I would like to change those to proper Japanese. Could you tell me how to? I found some post to change the button label for <lightning:input type=“file”>. Is it possible to change for < lightning-file-upload> as well?

3 Answers 3


the documentation indicates how to change the label

The button label is "Upload Files" by default. Use the label attribute to add a descriptive label above the Upload Files button.

this is of course only for what is displayed above the button, I don't believe there are other modifiable attributes though

  • You can use Style Hooks to change many of the colors and things for most components. The docs don't reflect all the possibilities as of yet.
    – sfdcfox
    Commented May 14, 2021 at 2:36
  • for labels as well? I knew about using hooks for colors and so on
    – glls
    Commented May 14, 2021 at 3:07
  • 1
    I just thought you meant no further customizations at all. You're right though, part of it can't be customized at all.
    – sfdcfox
    Commented May 14, 2021 at 4:05

As you mentioned there are other approaches to change label which will require moving from lightning-file-upload to lightning-input. Like the one mentioned in the following blogs or similar questions:-

  1. https://www.salesforcetroop.com/custom_file_upload_using_lwc &

  2. Lightning:input type="file" change the "Upload Files" text

However, it is recommended to use lightning-file-upload as it provides the functionality without much of server side handling part. Use of Lightning-input will require lot of custom apex code. Hope in future releases , salesforce provides flexibility to change "Upload Files" button.


You can accomplish it with Static Resources and some lightning style classes.

Create the .css file with next content and upload it to Static Resources :

/* remove the "or drop files" label from the right of the lightning:input type file */
.slds-file-selector__dropzone .slds-file-selector__text{
    font-size: 0 !important;

/* insert the text "New Exam" into the button of the lightning:input type file */
.slds-file-selector__dropzone .slds-file-selector__text:after{
    content: 'Or Test Drop' !important;
    font-size: .8125rem !important;

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

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

Then in your LWC import the Static Resources and the lightning-platform-resource-loader (link - Platform Resource Loader ):

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import testFileUpload from '@salesforce/resourceUrl/testFileUpload';
export default class TestFileUpload extends LightningElement {
    connectedCallback() {
            loadStyle(this, testFileUpload + '/testFileUpload.css')
        ]).then(() => {
            console.log('Upload success')
        }).catch( (error) => {

My HTML file (link : File Upload):

    <div class="card">

And the result :

enter image description here

So you can see it works for both <lightning-input type="file"> and for <lightning-file-upload>.

Note :
You can change the content property in your .css file to what you need !

You must log in to answer this question.

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