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

Question

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

it how it look see the screen: vaadin.com/documents/portlet_file_entry/10187/singleupload.png/… — Dumitru Gutu
– Dumitru Gutu, Commented Feb 20, 2015 at 16:43

default locale · Accepted Answer · 2015-02-21 06:49:15Z

1

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
}

answered Feb 21, 2015 at 6:49

default locale

13.6k13 gold badges60 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dumitru Gutu · Accepted Answer · 2015-02-22 12:29:09Z

1

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

.gwt-FileUpload { display: none }

answered Feb 22, 2015 at 12:29

Dumitru Gutu

5791 gold badge7 silver badges19 bronze badges

1 Comment

default locale Over a year ago

Hi! Don't forget to mark the answer as accepted (you can accept your own answer). Check out this article from help center: stackoverflow.com/help/someone-answers

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related