Can you use a vaadin-button in upload?

Question

All the Upload examples show using NativeButton when programmatically creating an Upload. I want to use a Button (vaadin-button) that is part of a Designer layout. When I try this I see the following error:

Caused by: java.lang.IllegalArgumentException: Trying to detach an element from parent that does not have it.
    at com.vaadin.flow.dom.impl.AbstractNodeStateProvider.removeChild(AbstractNodeStateProvider.java:123)
    at com.vaadin.flow.dom.Node.removeChild(Node.java:376)
    at com.vaadin.flow.dom.Element.removeFromParent(Element.java:577)
    at com.vaadin.flow.dom.Node.insertChild(Node.java:293)
    at com.vaadin.flow.dom.Node.appendChild(Node.java:141)
    at com.vaadin.flow.component.upload.GeneratedVaadinUpload.addToAddButton(GeneratedVaadinUpload.java:1344)
    at com.vaadin.flow.component.upload.Upload.setUploadButton(Upload.java:276)

We are using Vaadin 14 in CDI mode.

Answer 1

To change the upload button with Designer, you need to drag the button into the upload in the hierarchy, then add slot="add-button" attribute.

Your templates should end up looking like this:

<vaadin-upload>
 <vaadin-button slot="add-button">
   Button 
 </vaadin-button>
</vaadin-upload>

Note that you must do this in the hierarchy panel.

If this does not help (maybe you did this already), could you perhaps include some code that shows what you are trying to do?

Answer 2

I've just created an issue for this improvement in our Designer repository https://github.com/vaadin/designer/issues/2399.

Feel free to comment.