Add File remove listener, or something similiar

[lolytxd]

Vaadin version: 10.0.0

Description

When I add Upload component with uploaded file preview component, like in section Filtered multi file upload for images in https://vaadin.com/components/vaadin-upload/java-examples, how can I find out, which file was removed, so I can remove file preview?

I see that there is .addPropertyChangeListener("files",... but I think it doesn't work. It fires only at start and then nothing.

[iatomic]

a remove file listener is CRITICAL...I d nto think it is an enhancement.

[iatomic]

lolytxd.....btw where do you see the .addPropertyChangeListener("files",... ???.... well...if you mean the workaround that requires you to extend upload to get at it at the dom... this is really a tough workaround. if i have to extend every component to use it starting from LABELs and up to UPLOADs... it will be kind of messy code

[youness-teimoury]

Here is what I did to detect user clicks on abort icon;

    Upload upload = ...
    upload.getElement().addEventListener("upload-abort", new DomEventListener() {
        @Override
        public void handleEvent(DomEvent domEvent) {
            # called when user aborts the uploaded file
        }
    });

[iatomic]

see this thread as well for our workaround

https://vaadin.com/forum/thread/17336034/17362443

[KrifaYounes]

why there is a clear button that doesn't work ?
It's possible to provide the component without the clear button ?
or give a solution to clear a file uploaded
thanks a lot,

[phauer]

Are there any updates? For me, this is a really obvious and serious bug: I click to remove an upload, but the file is still in the upload's buffer on the server-side. A fix would be highly appreciated.

[vladimirdyuzhev]

It looks like there is not going to be a fix any time soon.

I'm considering to hide the upload component as soon as the upload is complete and replace it with a regular list - and deal with the deletions there. It is still not a very good solution as my flow implies that users repeatedly add more files to the set and remove them looking for a right combination of data.

This issue is not an enhancement, @caalador , this is a defect.

[web-padawan]

Update: vaadin-upload 4.2.2 was released.
https://github.com/vaadin/vaadin-upload/releases/tag/v4.2.2

The file-remove event is now fired properly. So workaround from the above https://github.com/vaadin/vaadin-upload-flow/issues/63#issuecomment-435730265 should work now. Sorry for the lack of response.

[markhm]

Confirmed: the "file-remove" event now works.

I am trying to solve the larger problem with a different approach and would appreciate feedback anyone might have. See description here.

[Braus]

I'm using the file-remove event now. But I don't know how to see what got removed. Does anyone have an idea?

My code:

foodArticleUpload.getElement().addEventListener("file-remove", new DomEventListener() {
    @Override
     public void handleEvent(DomEvent event) {
          Element sauce = event.getSource();
         JsonObject ob = event.getEventData();
     }
});  

[Legioth]

@Braus You can configure the low level event listener to extract e.g. event.detail.file.name from the client-side event and pass it to the server:

myUpload.getElement().addEventListener("file-remove", event -> {
  JsonObject eventData = event.getEventData();
  System.out.println("Removed " + eventData.getString("event.detail.file.name"));
}).addEventData("event.detail.file.name");

[fleahy]

Is there a plan to make the file remove event more seamless on Java? Similar to how the addSucceededListener works?

Also, is there a way to get which file in the list is being deleted, rather than just the filename? When there are multiple files with the same name there's no way of knowing which one was deleted.

[TatuLund]

See also: #2965

There is a complete workaround example here: https://gist.github.com/TatuLund/986114a82078e7228b1c37ba4b07f94d

[yuriy-fix]

So suggested API to be created on Upload would be:

• addFileRemovedListener(ComponentEventListener<FileRemovedEvent> listener)
• FileRemovedListener
  • Should contain file-name provided from file-remove webcomponent's event