Добавление dropzone.js в проект Vaadin Flow + Spring Boot - PullRequest
Новая
       21

Добавление dropzone.js в проект Vaadin Flow + Spring Boot

0 голосов
/ 03 апреля 2019

Я хочу добавить dropzone.js версии 5 в мой проект Vaadin Flow 12.0.7 и Spring Boot 2.1.3.RELEASE, но безуспешно.

Я пробовал оба способа добавления Dropzone на странице: по умолчанию, описанный здесь: https://www.dropzonejs.com/#usage И программно описанный здесь: https://www.dropzonejs.com/#create-dropzones-programmatically

Я добавил dropzone.js к статическим ресурсам в моем проекте: 

\src\main\resources\static\frontend\js

и импортировал ее с помощью 

@JavaScript("/frontend/js/dropzone.js")

Затем я добавил новую форму и div на мой взгляд: 

@Route
@JavaScript("/frontend/js/dropzone.js")
public class MainView extends VerticalLayout {

    private final Div dropZoneDiv;

    private boolean dropZoneAttached = false;

    private MainView() {
        add(new H1("Vaadin Spring Dropzone"));

        add(new H2("Default adding method"));
        Element form = new Element("form");
        form.setAttribute("action", "file/post");
        form.setAttribute("class", "dropzone");
        form.setAttribute("id", "my-awesome-dropzone");
        getElement().appendChild(form);

        add(new H2("Create dropzone programmatically"));
        dropZoneDiv = new Div();
        dropZoneDiv.setId("dzDiv");
        add(dropZoneDiv);
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);
        if (dropZoneDiv!=null && !dropZoneAttached) {
            UI.getCurrent().getPage().executeJavaScript(
                    "var myDropzone = new Dropzone(\"div#dzDiv\", { url: \"/file/post\"});\n" //+
            );
            dropZoneAttached = true;
        }
    }
}

Я ожидал увидеть хотя бы одну зону сброса на странице, но на самом делеdiv и форма, к которой я присоединяю dropzone, пусты в Chrome или Firefox.

1 Ответ

0 голосов
/ 10 июня 2019

Я получил ответ, спасибо моему другу и коллеге.

Вот рабочее решение: 

@Route
@JavaScript("/frontend/js/dropzone.js")
@StyleSheet("/frontend/js/dropzone.css")
public class MainView extends VerticalLayout {

    private MainView() {

        add(new H1("Vaadin Spring Dropzone"));

        add(new H2("Default adding method"));
        Element form = new Element("form");
        form.setAttribute("action", "uploadwsdl");
        form.setAttribute("class", "dropzone dz-clickable");
        form.setAttribute("id", "wsdlUpload");
        getElement().appendChild(form);
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);
        UI.getCurrent().getPage().executeJavaScript("Dropzone._autoDiscoverFunction()");
    }

}
...