Vaadin 10 - Upload Component - remove file event - vaadin

Question

When file is uploaded, a Button is enabled:
// myUploadComponent extends Upload
myUploadComponent.addSucceededListener(event -> enabledMyButtonMEthod ()); // working well
I don't find out how to disable that Button when I remove the file (click on the cross next to it).
There should be something like 'addRemoveListener' ... ?
How can I detect this event ?

Answer 1

You can listen to the "file-remove" event in the upload component. Here is an example.
#Route("")
public class MainView extends VerticalLayout {
public MainView() {
MyUpload upload = new MyUpload();
upload.addFileRemoveListener(e -> Notification.show("Button disabled"));
add(upload);
}
class MyUpload extends Upload {
Registration addFileRemoveListener(ComponentEventListener<FileRemoveEvent> listener) {
return super.addListener(FileRemoveEvent.class, listener);
}
}
#DomEvent("file-remove")
public static class FileRemoveEvent extends ComponentEvent<Upload> {
public FileRemoveEvent(Upload source, boolean fromClient) {
super(source, fromClient);
}
}
}

Answer 2

I have added and event listener like so
upload
.getElement()
.addEventListener(
"file-remove",
event -> {
JsonObject eventData = event.getEventData();
String fileName = eventData.getString("event.detail.file.name");
// ...
}).addEventData("event.detail.file.name");
Found the solution here: https://github.com/vaadin/vaadin-upload/issues/347#issuecomment-516292999

Answer 3

I would try public Registration addChangeListener(Upload.ChangeListener listener) which should be triggered on the filename change event

Answer 4

I have extended Tulio's solution to get the removed file name as well in the FileRemoveEvent. Comes in very handy!
private class MyUpload extends Upload {
public MyUpload(MultiFileMemoryBuffer buffer) {super(buffer);}
Registration addFileRemoveListener(ComponentEventListener<FileRemoveEvent> listener) {
return super.addListener(FileRemoveEvent.class, listener);
}
}
#DomEvent("file-remove")
public static class FileRemoveEvent extends ComponentEvent<Upload> {
private String fileName;
public FileRemoveEvent(Upload source, boolean fromClient, #EventData("event.detail.file.name") JreJsonString fileNameJson) {
super(source, fromClient);
fileName = fileNameJson.getString();
}
public String getFileName() {
return fileName;
}
}