vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

Cannot add a file for an Upload if the accepted file type contains multiple dots #4777

Closed DManstrator closed 1 year ago

DManstrator commented 1 year ago

Description

I have a custom file extension, let's call it .hello.world.

When I set it as an accepted file type of the Upload with Upload#setAcceptedFileTypes, corresponding files can be selected with the file chooser as expected. image

However, when choosing the file, the file is not added to the Upload and a FileRejectedEvent is thrown with the message Incorrect File Type..

I created a html test file to see if this is generally unsupported but doing it in plain HTML, it was possible. See the attached HTML file. input-file-text.html.txt

Expected outcome

I am able to successfully add a file with multiple dots in the file extension if it's set as an accepted file type.

Minimal reproducible example

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.NativeButton;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.upload.Upload;

import java.io.Serial;

public final class UploadDialog extends Dialog {

    @Serial
    private static final long serialVersionUID = 7866430661088575019L;

    private final Button updateButton = new Button("Upload");

    public UploadDialog() {
        updateButton.setEnabled(false);

        final Upload upload = getUpload();
        add(new VerticalLayout(upload, updateButton));

        updateButton.addClickListener(evt -> {
            System.out.println("Start uploading.");
            close();
        });
    }

    private Upload getUpload() {
        final Upload upload = new Upload();
        final NativeButton uploadButton = new NativeButton("Upload");
        upload.setUploadButton(uploadButton);
        upload.setAcceptedFileTypes(".hello.world");  // Only works in some browsers according to the docs.
        upload.addFileRejectedListener(evt -> System.out.println("Failed to add a file: " + evt.getErrorMessage()));
        upload.addSucceededListener(evt -> {
            System.out.println("Successfully added " + evt.getFileName());
            updateButton.setEnabled(true);
        });
        return upload;
    }

}

Steps to reproduce

  1. Create a new instance of UploadDialog and open it.
  2. Download the following file and remove the .txt suffix (needed for GitHub): test-file.hello.world.txt
  3. Try to add that file.

Environment

Vaadin version(s): 23.2.16 (Currently not able to use VAADIN 23.3.X so a backport for 23.2.X would be nice.) OS: Windows 10

Browsers

Issue is not browser related

vursen commented 1 year ago

Possibly a regression caused by https://github.com/vaadin/web-components/pull/4641.

ugur-vaadin commented 1 year ago

This issue was fixed by a PR in web components. The fix will be effective once it is released.

DManstrator commented 1 year ago

Thanks. And sorry for reporting it in the wrong place.