CODEWITHSUNDEEP
javauploadvaadin
Dumitru Gutu
Dumitru Gutu

Reputation: 579

How to implement upload component with one upload button in Vaadin?

I have the following class that implements the single Upload example

@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);
}

When running the application I get strange layout display of upload component.

enter image description here

So i need upload component just with one upload button, that why i used : upload.setImmediate(true);

Upvotes: 3

Views: 5285

Answers (2)

Dumitru Gutu
Dumitru Gutu

Reputation: 579

the following css work fine for me thanks for your good point

.gwt-FileUpload { display: none }

Upvotes: 1

default locale
default locale

Reputation: 13456

Button.setImmediate(true) is used to start upload after file selection (without button click). But you still need to hide the button with CSS.

Quote from Book of Vaadin 5.25 Upload:

You can also hide the upload button with .v-upload .v-button {display: none} in theme, have custom logic for starting the upload, and call startUpload() to start it. If the upload component has setImmediate(true) enabled, uploading starts immediately after choosing the file.

So you need to add this to your custom theme:

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

Upvotes: 1

Related Questions