Lightning Input – Change ‘Upload Files’ Text in lightning:input Type=”file”
I would like to change the text and the style of the "Upload Files" in the lightning:input. The style as far as I understand I would have to overwrite the slds class, but what about the text?
Best Answer
Try adding these lines to your Lightning Style:
/* remove the "or drop files" label from the right of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__text{
display: none;
}
/* remove the "Upload Files" text from the button of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__button{
font-size: 0;
}
/* insert the text "New Exam" into the button of the lightning:input type file */
.THIS .slds-file-selector__dropzone .slds-file-selector__button:after{
content: 'New Exam';
font-size: .8125rem;
color: rgba(27, 82, 151, 1.0);
}
So what I can see is that if I upload 2 files together, then upload another one, the previous two files get removed. My question is that is there any possible way to append the 3 files together instead of the first two getting removed?
No, this is a browser-level API. It's strictly read-only and depends on what the user chooses as the files.
My second question would be that can I assign the fileInput to an array attribute of the corresponding component? If so then what would be attribute type?
It's not a real array, it's an "array-like object." The design decision for this is based on the fact that it is a read-only object called FileList, and so you can't do normal array stuff to it directly. Converting to a normal array is easy enough:
var filesAsArray = [].slice.call(fileList);
As long as you do this first, you can save the File objects in to a List. I wouldn't recommend trying to store the original fileList directly, as it will be modified when a user selects new files.
Best Answer
Try adding these lines to your Lightning Style: