flow-components icon indicating copy to clipboard operation
flow-components copied to clipboard

Upload: Switching to Single file receiver and then back to MultiFileReceiver prevents adding multiple files

Open HerbertsVaadin opened this issue 3 months ago • 0 comments

Description

If I set receiver to instance of MemoryBuffer and then switch it to instance of MultiFileReceiver (for example MultiFileMemoryBuffer), the upload component still only allows to upload a single file. bug-switching-upload-receiver

Workaround: Manually set the max allowed files upload.setMaxFiles(12);

Expected outcome

When switching to a MultiFileReceiver it should allow to upload multiple files.

Minimal reproducible example

package com.example.application.views.random;

import com.example.application.views.MainLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.upload.Upload;
import com.vaadin.flow.component.upload.receivers.MemoryBuffer;
import com.vaadin.flow.component.upload.receivers.MultiFileMemoryBuffer;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import jakarta.annotation.security.PermitAll;

import static com.example.application.views.random.UploadComponentView.Type.MULTI;
import static com.example.application.views.random.UploadComponentView.Type.SINGLE;

@PageTitle("Upload")
@Route(value = "upload", layout = MainLayout.class)
@PermitAll
public class UploadComponentView extends VerticalLayout {

    public UploadComponentView() {
        var upload = new Upload();

        var radioButtons = new RadioButtonGroup<Type>();
        radioButtons.setItems(Type.values());
        radioButtons.setItemLabelGenerator(Type::name);
        radioButtons.addValueChangeListener(valueChange -> {
            if (valueChange.getValue() == SINGLE) {
                upload.setReceiver(new MemoryBuffer());
            } else {
                upload.setReceiver(new MultiFileMemoryBuffer());
            }
        });
        radioButtons.setValue(MULTI);

        add(radioButtons, upload);
    }

    enum Type {
        SINGLE, MULTI
    }
}

Steps to reproduce

  1. Use the example above.
  2. Switch to SINGLE radio button
  3. Switch back to MULTI radio button
  4. Notice that Upload component only allows to upload a single file

Environment

Vaadin version(s): 24.3.9 OS: Windows 11

Browsers

Chrome, Firefox

HerbertsVaadin avatar Apr 22 '24 09:04 HerbertsVaadin