如何在 Vaadin 中实现一个上传按钮的上传组件？

Question

我有以下实现单个上传示例的类

@Override
public void init() {
    Window mainWindow = new Window("Singleuploadclick Application");
    Label label = new Label("Hello Vaadin user");

    mainWindow.addComponent(label);

    status = new Label("Please select a file to upload");
    upload = new Upload(null, receiver);

    upload.setImmediate(true);
    upload.setButtonCaption("Select file");

    upload.addListener(new Upload.StartedListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadStarted(StartedEvent event) {
            upload.setVisible(false);
            status.setValue("Uploading file \"" + event.getFilename() + "\"");
        }
    });

    upload.addListener(new Upload.ProgressListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void updateProgress(long readBytes, long contentLength) {
        }

    });

    upload.addListener(new Upload.SucceededListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadSucceeded(SucceededEvent event) {
            status.setValue("Uploading file \"" + event.getFilename() + "\" succeeded");
        }
    });

    upload.addListener(new Upload.FailedListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadFailed(FailedEvent event) {
            status.setValue("Uploading interrupted");
        }
    });

    upload.addListener(new Upload.FinishedListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadFinished(FinishedEvent event) {
            upload.setVisible(true);
            upload.setCaption("Select another file");
        }
    });

    mainWindow.addComponent(status);
    mainWindow.addComponent(upload);            
    setMainWindow(mainWindow);
}

在运行应用程序时，上传组件的布局显示很奇怪。

所以我只需要一个上传按钮就可以上传组件，这就是我使用的原因：upload.setImmediate(true);

Answer 1

Button.setImmediate(true) 用于在文件选择后开始上传（无需单击按钮）。但是您仍然需要使用 CSS 隐藏按钮。

引用Book of Vaadin 5.25 Upload:

您还可以在主题中使用 .v-upload .v-button {display: none} 隐藏上传按钮，自定义开始上传的逻辑，并调用 startUpload() 来启动它.如果上传组件启用了 setImmediate(true)，则选择文件后立即开始上传。

所以你需要将它添加到你的自定义主题中：

.v-upload .v-button {
    display: none
}

Answer 2

下面的 css 对我来说很好，谢谢你的好点

.gwt-文件上传 { 显示：无 }