[SOLVED] How to add listener to the upload component of vaadin 14 When the X button is clicked

How to add listener to the upload component of vaadin 14 When the X button is clicked

When i want delete some file and upload another instead , i can not find the way to realize it since after i click the X button, The file of the background object always exists( When I upload two, delete one, and then upload another, there will be three file objects in the background.) Like this enter image description here enter image description here. And the Upload Component do not have the listener of it.

Give me a way to get the exact file uploaded by the user

Solution

Until Vaadin 24.4, you can use a workaround like this:

        upload.getElement().executeJs(
                "this.addEventListener('file-remove', (e) => $0.$server.fileRemove(e.detail.file.name));",
                getElement());

and declare a @ClientCallable method fileRemove to remove a file with that name from your storage.