Is there a way to separate out the progress bar from the Upload component in Vaadin Flow?

user_39371 0
Viewed 127

I can see that you can customize the button as well as adjust whether an upload drop in the Upload Component is allowed but is there any way to pull out the progress bar so that it can be presented in a popup window. I ask because the upload component I have is one of set of buttons in a HorizontalLayout above a Grid and having the progress bar looks pretty terrible. Instead I'd like to present the progress in a popup or something like that. Is this possible and if so how can it be done. I cannot find anything in the API or in the user manual at: https://vaadin.com/docs/latest/ds/components/upload

My current code is (very basic prototype):

MultiFileMemoryBuffer multiFileMemoryBuffer = new MultiFileMemoryBuffer();
Upload multiFileUpload = new Upload(multiFileMemoryBuffer);
multiFileUpload.addSucceededListener(event -> {
    System.out.println("File uploaded : " + event.getFileName());
});
multiFileUpload.setDropAllowed(false);
multiFileUpload.setUploadButton(new Button("Upload"));

I do see a method called addProgressListener() however which I assume I could use to add a progressbar somewhere else however I cannot find a way to remove the current progressbars. The other concern is the checkmarks, the error messages, etc. that come with it. Ideally it would be great to take everything and put it in a popup notification window or something like that...

vaadin-flow vaadin
1 Answers

The file list containing the progress bar, error messages, etc, can be hidden with css by targeting the file-list shadow part, either as [part="file-list"] { display: none; } in a vaadin-upload.css stylesheet, or with vaadin-upload::part(file-list) { display: none; } from a global stylesheet.

Unfortunately you'll have to recreate a corresponding UI e.g. in an overlay somehow, but there is a <vaadin-upload-file> web component you could utilize for that.

user_2981030
Related