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
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.– sfdcfoxMay 14, 2021 at 2:36
-
-
1I just thought you meant no further customizations at all. You're right though, part of it can't be customized at all.– sfdcfoxMay 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:-
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() {
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 !