Vaadin-Flow Upload Component: Upload-Button disabled after Upload

After an upload the uploaded file is displayed and the upload button is disabled. The only way to upload another file is to delete the first, in which case the upload button is enabled again.

Can this component be used at all for more than one upload or do I have to re-initialise it every time?

Of course, see “Simple in memory receiver for multi file upload” here https://vaadin.com/components/vaadin-upload/java-examples

API:
https://vaadin.com/api/platform/14.4.0/com/vaadin/flow/component/upload/Upload.html#setMaxFiles-int-

Please note that I am not talking about multiple file uploads, but about repeated single file uploads.

It’s the max files that determines how many files can be uploaded, single or multi.

Duh, thank you very much! I thought this parameter was for multi-file uploads only. Is there a way to set this number to “unlimited” short of using a ridiculously high number? The API states that unlimited is the default, but that seems to be wrong?

Also, can I avoid that the uploaded files are listed below the button? I have implemented my own listing below the component, so this is somewhat redundant.

You should file a ticket about the default not being unlimited: https://github.com/vaadin/vaadin-flow-components

You can at least hide the uploaded files list with CSS - see the example here: https://cookbook.vaadin.com/large-upload-area

CSS is difficult, because the list is in the shadow DOM. I can manipulate it via theming, but that would affect all Upload components, not just the one I am targeting. At least I don’t know how to target a specific component only:

@CssImport(value=“./styles/custom-fileupload-styles.css”, themeFor = “vaadin-upload-file”)

I can’t change the tag name of the element either, because it is again in the shadow DOM of “vaadin-upload”.

You can use a theme attribute. The example I linked above does so. If you’re using Vaadin’s web components, they will automatically propagate the theme attribute to any child components.

I believe that doesn’t work, because the theme attribute will be on the “vaadin-upload” element, whereas the element I need to target is “vaadin-upload-file”, which is in the shadow root of “vaadin-upload”. And the “vaadin-upload-file” does not have the theme attribute.

Interestingly, this clears the list:

upload.getElement().setPropertyJson("files", Json.createArray());

Is there a hook for a server side validator that rejects an uploaded file, if it has already been uploaded (same filename)?

You don’t need to hide vaadin-upload-file; the following should be enough (themeFor="vaadin-upload" and the Upload component should have the attribute theme with the value custom-upload):

:host([theme~="custom-upload"]
) slot[name="file-list"]
 {
  display: none;
}

As for clearing the list, that’s a known issue / missing feature: https://github.com/vaadin/vaadin-upload/issues/339

I tried that, but it doesn’t work. [wrong assumption deleted]

Sorry, I’m confused :slight_smile:

Edit: of course your suggestion works, my app didn’t reload. Sorry for being sloppy.

The weird thing is, even if I clear the list of uploaded files via one of the workarounds mentioned in https://github.com/vaadin/vaadin-upload/issues/339, some pointer to the just uploaded file is still retained. Because on the following upload I am getting two events of type com.vaadin.flow.component.upload.SucceededEvent - one for the file from the previous upload and one for the file from the current upload. The order of those events is arbitrary.

Another issue to report or a follow-up error?

If you can create a small sample where the issue can be reproduced, create a ticket by all means.

Wasn’t successful creating the small sample. It appears to either be a Browser/OS specific thing the way the upload is handled and/or timing-dependent (Selenium can reproduce it, me manually not). Needs more investigation.