Open Ardenian opened 1 year ago
You could also use CSS to achieve pretty much the same result. Here's an example:
vaadin-upload-file::part(remove-button) {
display: flex;
align-items: center;
background: var(--lumo-contrast-5pct);
color: var(--lumo-error-color);
width: auto;
border-radius: var(--lumo-border-radius-s);
padding-right: 0.5em;
}
vaadin-upload-file::part(remove-button)::after {
content: 'Remove';
display: inline-block;
font-size: var(--lumo-font-size-s);
}
Thank you for looking into this and commenting with an alternative solution, @rolfsmeds. Using pure CSS could be an alternative, I agree. For pure changes of visuals it should suffice for my current use case. Nonetheless, I do believe that a server-side opportunity to work with components there could provide certain advantages in some use cases.
Describe your motivation
I have an instance of the
Upload
component that accepts a maximum of one file. After uploading the file, I would like to have a different button than provided by default to remove the file again.Such a button could look like this:
Resulting in something like this:
Describe the solution you'd like
Similar to
setUploadButton()
, I would appreciate a methodsetRemoveFileButton()
which allows me to define a component that can be clicked which will remove the respective file from theUpload
component instance when clicked. Additionally, this component could have apart="remove-button"
that enables targeted styling via CSS.Describe alternatives you've considered
The current alternative that I consider is hiding the icon button to remove a file of the
Upload
component instance with CSS and add my own custom button to my layout that removes the file when clicked. For this, I have to implement the logic to remove a file from theUpload
component instance using click listeners andclearFileList()
.Additional context
No response