Vaadin 14 - Показать ошибки при загрузке файла, как и в любом другом поле ввода - PullRequest
Новая
       26

Vaadin 14 - Показать ошибки при загрузке файла, как и в любом другом поле ввода

0 голосов
/ 16 января 2020

Сначала краткий вопрос: Как показать сообщение об ошибке загрузки в том же стиле, что и во всех других полях ввода?

Подробности: Ваадин 14.1.5 предлагает элемент загрузки: https://vaadin.com/components/vaadin-upload/java-examples

Я создал поле загрузки с этим кодом: 

    MemoryBuffer buffer = new MemoryBuffer();
    Upload upload = new Upload(buffer);

Сообщение об ошибке слишком большого размера файла принудительно устанавливается эта строка: 

    upload.setMaxFileSize(1);

Перевод выполняется с UploadI18N (см. https://vaadin.com/api/platform/14.1.5/com/vaadin/flow/component/upload/UploadI18N.html): 

    upload.setI18n(buildMyUploadI18N(Locale.GERMAN));

И со всеми слушателями я могу получить и показать ошибку сообщения на стороне сервера, например, для отклонения: 

    upload.addFileRejectedListener(new ComponentEventListener<FileRejectedEvent>() {
        @Override
        public void onComponentEvent(FileRejectedEvent event) {
            Notification.show(event.getErrorMessage());
        }
    });

Этот код работает нормально, и система показывает пользователю уведомление, когда файл для загрузки слишком велик.

Но: это поведение сообщения проверки отличается от того, к чему привык пользователь: красный текст рядом с полем ввода (см. скриншот).

validation with binder

Как можно Я показываю сообщение об ошибке загрузки в том же стиле, что и все остальные поля ввода?

Ответы [ 2 ]

1 голос
/ 20 января 2020

Другой вариант - использовать Paragraph, как на странице примера, на которую вы ссылаетесь. Исходный код для этого может быть найден здесь: addRejectedListener

Поэтому, когда вызванный отклоненный слушатель вызывается, добавьте абзац с красным текстом и, возможно, установите фон загрузки на розовый (или любой другой). другой цвет / стиль, который вы хотели бы иметь). Ниже приведена упрощенная версия подхода (вы должны поместить стили в отдельный файл css и установить / удалить класс для загрузки) 


import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.HasComponents;
import com.vaadin.flow.component.HtmlComponent;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.upload.Upload;
import com.vaadin.flow.component.upload.receivers.MemoryBuffer;
import com.vaadin.flow.router.Route;


@Route("multiuploadView")
public class MultiFileUploadView extends VerticalLayout {

    Div output = new Div();
    Upload upload;
    public MultiFileUploadView(){
        MemoryBuffer buffer = new MemoryBuffer();
        upload = new Upload(buffer);
        upload.setMaxFiles(1);
        upload.setDropLabel(new Label("Upload a 300 bytes file in .csv format"));
        upload.setAcceptedFileTypes("text/csv");
        upload.setMaxFileSize(300);

        upload.addFileRejectedListener(event -> {
            Paragraph component = new Paragraph();
            showOutput(event.getErrorMessage(), component, output);
        });

        add(upload,output);
    }

    private void showOutput(String text, Component content,
                            HasComponents outputContainer) {
        outputContainer.removeAll();
        HtmlComponent p = new HtmlComponent(Tag.P);
        p.getElement().setText(text);
        p.getElement().getStyle().set("color","red");
        upload.getElement().getStyle().set("background","pink");

        outputContainer.add(p);
        outputContainer.add(content);
    }
}

И это выглядит так: enter image description here

Но, в противном случае, я бы сказал, что ваш обходной путь - это почти то, что можно сделать :)

0 голосов
/ 16 января 2020

Мой текущий обходной путь выглядит следующим образом:

Система создает отключенное текстовое поле в дополнение к элементу Upload 

    TextField filenameField = new TextField();
    filenameField.setEnabled(false);

Каждый прослушиватель ошибок в элементе Upload затем устанавливает ошибку сообщение в TextField: 

    upload.addFileRejectedListener(new ComponentEventListener<FileRejectedEvent>() {
        @Override
        public void onComponentEvent(FileRejectedEvent event) {
            filenameField.setInvalid(true);
            filenameField.setErrorMessage(event.getErrorMessage());
        }
    });

и 

    upload.addFailedListener(new ComponentEventListener<FailedEvent>() {
        @Override
        public void onComponentEvent(FailedEvent event) {
            filenameField.setInvalid(true);
            filenameField.setErrorMessage(event.getReason().getMessage());
        }
    });

, сбросить недействительный статус и установить новое имя файла при успехе: 

    upload.addSucceededListener(event -> {
        filenameField.setValue(StringUtils.trimToEmpty(event.getFileName()));
        filenameField.setInvalid(false);
    });

Вот как это выглядит как - не мое предпочтительное решение (потому что имя файла не ошибочное, а размер файла), но на данный момент это нормально для меня:

enter image description here

...