[Upload] Allow the button to remove a file to be set to a component

[Ardenian]

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:

            Button removeButton = new Button("Remove");
            removeButton.setIcon(new Icon("vaadin", "trash"));
            removeButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);

Resulting in something like this:

Describe the solution you'd like

Similar to setUploadButton(), I would appreciate a method setRemoveFileButton() which allows me to define a component that can be clicked which will remove the respective file from the Upload component instance when clicked. Additionally, this component could have a part="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 the Upload component instance using click listeners and clearFileList().

Additional context

No response

[rolfsmeds]

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);
}

[Ardenian]

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.