Hot to change the button label for lightning-file-upload?

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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() {
        Promise.all([
            loadStyle(this, testFileUpload + '/testFileUpload.css')
        ]).then(() => {
            console.log('Upload success')
        }).catch( (error) => {
            console.error(error);
        })
    }
}

My HTML file (link : File Upload):

<template>
    <div class="card">
        <div>
            <lightning-file-upload
                label=""
                name="fileUploader"
                accept={acceptedFormats}
                record-id={myRecordId}
                onuploadfinished={handleUploadFinished}
                multiple
            ></lightning-file-upload>
        </div>
        <div>
            <lightning-input 
                type="file" 
                label="Attachments"
                variant="label-hidden"
            ></lightning-input>
        </div>
    </div>
</template>

And the result :

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 !