How to get drag&drop of Vaadin Upload to trigger file input "change" event?

Flow
1

I have an Upload where users can upload rather large ZIP-files. I’ve added a ‘change’ event listener to the fileInput to evaluate the ZIP contents to see if it contains certain files, read data from those files and display this data below the upload component. Uploading the ZIP is only possible if this validation was positive.

When using the “Upload File…” button, the ‘change’-event is correctly triggered, but not when using drag&drop.

Is it possible to trigger the ‘change’-event or any other event on the client side to achieve the same as with drag&drop as with the “Upload File…” button?

Here is my code:

    public static final String FILE_CHANGE_EVENT_LISTENER = """
            $0.$.fileInput.addEventListener("change", (event) => {
                new Promise((resolve, reject) => {
                    let file = event.target.files[0];
                    let fileName = file.name;
                    const reader = new FileReader();
                    reader.onload = () => {
                        resolve([reader.result, fileName]);
                    };
                    reader.onerror = reject;
                    reader.readAsArrayBuffer(file);
                }).then(([fileContent, fileName]) => {
                    let fileInfo = window.getFileInfo(fileContent);
                    this.$server.receiveFileInfo(fileInfo);
                });
            });
            """;

    public UploadView() {
       final var fileBuffer = new MemoryBuffer();
        upload = new Upload(fileBuffer);
        upload.setDropAllowed(true);
        upload.setAcceptedFileTypes(".zip");
        upload.setAutoUpload(false);

        this.add(upload);

        this.getElement().executeJs(FILE_CHANGE_EVENT_LISTENER, upload);
    }
2

You could try using the files-changed event on the upload component itself, which is fired whenever the file list is modified. For your purpose, you would need some book-keeping for which files were in the file list previously to detect new files.

There’s also upload-before, which can be used to cancel an upload. However that needs to run synchronously, so probably not useful in this case.

3

Thanks! I just had to change event registration like so for it to work:

$0.addEventListener("files-changed", (event) => {
....
 {